原生Ajax的本地数据请求以及跨域请求和jsonp以及cors跨域

时间：2022-11-21 21:35:25

原生Ajax请求:

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。五步使用法:

1.创建XMLHTTPRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.更新界面

Acces contro------- 跨域请求 失败. 

State==404           找不到页面.

State==500           找不到浏览器.

注意：

原生Ajax向一个不同的域请求数据，只要协议，域名，端口有任何一个不同都被当作一个不同的域

因为用原生js不能实现域名不同的跨域请求所以直接用XMLHttpRequest请求不同域上的数据时，是不可以的

一般针对ajax跨域解决就是通过JSONP解决或者CORS解决（这里说的js的跨域指不同的域之间进行数据请求和获取）,如以下

1.通过jsonp跨域:因为src可以跨域:

原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。注意所以jsonp是需要服务器端的页面进行相应的配合的。
function dosomething(jsondata){
  console.log(jsondata);
}
<script>
  /*jsonp  跨域原理*/     function dosomething(jsondata){
      console.log(jsondata);
    }
</script>
<script src="http://localhost:8080/ajax0609/php/data.php?callback=dosomething"></script>
补充：类似的我们也可以动态生成script脚本来实现跨域操作，
2.CORS请求原理
原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，即还是在原生js代码发送请求，只要在php后台进行修改即
PHP后台配置
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:
第一步:配置Php 后台允许跨域，在头文件中加上下面代码即可:
<?php header('Access-Control-Allow-Origin: *');

var ajax=new XMLHttpRequest();

ajax.open("get","http://localhost:8080/ajax0609/php/data.php");  

ajax.send(); 

ajax.onreadystatechange=function (){

 if(ajax.readyState==4&&ajax.status==200)    //判断服务器是否返回成功

 { console.log(ajax.response); } }
$get JSON方法会自动判断是否跨域，不的话直接调用普通的Ajax方法，跨的话，以异步加载形式调用json的回调函数

示例代码如下： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //方法2：原生AJAX加上php后台配置解决方法
    //如果单纯用原生ajax实现跨域请求是不可能的会出现
    // No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
    //表明请求失败，必须在php后台文件头部加 header('Access-Control-Allow-Origin: *');
/* var ajxa=new XMLHttpRequest();
 ajxa.open("get","http://localhost:80/php/data.php?",true);//不需要写回调函数
 ajxa.send()
 ajxa.onreadystatechange=function(){
     if(ajxa.readyState==4&&ajxa.status==200){
         console.log(ajxa.response)
     }
 }*/
function sr(vi){
    console.log(vi)
}
</script>
<!--方法:jsonp跨域创建script脚本-->
<script src="http://localhost:80/php/data.php?callback=sr"></script><!--//注意php文件后缀一定要是.php-->
</body>
</html>
//附后台php代码。

<?php
  header('Access-Control-Allow-Origin: *');
  $callback=$_GET[callback];//得到路径传递的参数  也就是函数名称
  $data=array("a","b","c");   //$符号代表新建一个数组对象
  $data[3]='aaa';
  $data[4]='bbb';
  $data[5]='ccc';
  echo $callback."(".json_encode($data).")";   //echo表示输出的意思相当于c中的print。.json_encode()该方法对对象进行json编码，返回括号里的json形式
  ?>
以上代码中
http为协议，localhost 80为域名 80为端口，后面的是文件目录，回调函数名。

标签：

相关文章