Ajax和跨域

一、Ajax

全称asynchronous（异步的）JavaScript and XML，是一种无需加载网页而更新网页部份内容的技术。

同步：客户端发起请求，而后客户端一直等待服务器端处理，收到服务器端响应后，客户端从新载入整个页面，若是有错误客户端再次发起请求……

异步：客户端发起请求，服务器端处理的同时客户端能够继续运行，没有等待，服务器端的响应会实时反馈给客户端。

步骤：

运用XMLHttpRequset对象和web服务器进行数据的异步交换；

运用JS操做DOM实现动态局部刷新。

语法：

var request=new XMLHttpRequest();

request.open("GET/POST","URL",true/false);  //true表示异步请求，默承认省略，false表示同步请求

request.send(string);

XMLHttpRequest对象的属性和方法：

readyState属性：HTTP请求的状态。4表示HTTP响应已彻底接收。

status属性：HTTP状态码。202表示成功，404表示"Not Found"。

responseText属性：服务器接收到的响应体，字符串形式。

onreadystatechange事件句柄：每次readystate属性改变的时候调用的事件句柄函数。

可参考（http://www.w3school.com.cn/xmldom/dom_http.asp）

例：发送Ajax请求 查询并处理

var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4){
        if(request.status===200){
            document.getElementById("searchResult").innerHTML=request.responseText;
        }else{
           alert("发生错误"+request.status);
        }
    }
}

 

二、JSON

全称JavaScript Object Notation，是一种存储和交换信息的表示法，相似XML，它采用【键值对】的方式组织，易于及其解析，

json是独立于语言的，只要按照规则任何语言均可以解析json，

与xml相比，json长度短，读写速度快，可使用js内建的方法eval()解析转换为js对象，

表示：json值能够是字符串（用双引号）、对象（用{}）、数组（用[]）、数字、true/false、null，

如，var jsondata='{"staff":[{"name":"mavis","age":24},{"name":"jack","age":25},{"name":"tony","age":26},]}' ;

json解析

（1）eval(string)：var jsonobj=eval('('+jsondata+')');

只接受字符串为参数，eval方法不会检查json字符串是否合法，并且json字符串中的JavaScript方法会自动执行，若是json字符串包含恶意代码，好比window.location转向了一个恶意地址，危险！不建议使用

（2）JSON.prase()：

把json字符串解析为对象，会检查json字符串是否合法，不会执行json字符串中的JavaScript方法

 

三、用jQuery实现Ajax

$.ajax({

type:"POST",  //POST/GET

url:"请求地址",

dataType:"json", //预期服务器返回的数据类型

data:{name:$("#staffname").val(),number:$("#staffnumber").val(),age:$("#staffage").val()},

success:function(data){},  //请求成功的回调函数，传入返回的数据和包含成功代码的字符串

error:function(jqXHR){alert("请求失败："+jqXHR.status);}  //请求失败的回调函数，传入XMLHttpRequest对象

})

 

四、跨域

域名：http://www.abc.com:8080/index.js

http://协议

www子域名

abc.com主域名

8080端口号（http协议的默认端口号为80，通常能够省略）

协议、子域名、主域名、端口号其中任意一个不一样，就叫作不一样域，不一样域之间相互请求资源叫做“跨域”。

JavaScript出于安全考虑，不容许跨域即同源策略，可是<script><img>这些含有src属性的标签没有同源策略，因此

处理跨域方法1：jsonp

原理：给<script src="跨域的文件的地址"></script>，这个跨域的文件返回跨域的服务器端数据。所以json只支持GET请求，不支持POST请求。

在www.aa.com页面中

<script src=“http://www.bb.com/jsonp.js”></script>

<script>

function jsonp(json){alert(json[“name”]);}

</script>

在www.bb.com页面中

jsonp({"name":"洪七公","age":70})

例，客户端：

$.ajax({
type:"GET",
url:"http://***/serverjsonp.php?number="+$("#keyword").val(),
dataType:"jsonp",
jsonp:"callback",//回调函数
jsonpCallback:"callbackname",//回调函数名称，如省略服务器会自动生成
success:function(data){
……
},
error:function(jqXHR){
alert("发生错误"+jqXHR.status);
}
});

服务器端部分语句：

$jsonp=$_GET["callback"]; 

$result = $jsonp.'({"success":false,"msg":"没有找到员工。"})';

$result = $jsonp.'({"success":true,"msg":"找到员工：***"})';

查看调试工做台：

Request URL:http://***/serverjsonp.php?number=101& callback=callbackname&_=1496980303811

返回值：callbackname({success: true, msg: "找到员工：***"}

处理跨域方法2：XHR2

HTML5提供的XMLHttpRequest level2已经实现了跨域访问，可是IE10如下还不支持。

实现方法很简单，只需在服务器端代码里加上：

header("Access-Control-Allow-Origin:*");

header("Access-Control-Allow-Methords:POST/GET");

便可。

 

以上就是我对Ajax异步请求和跨域的理解，终于写完啦啦啦

禁止转载