首页 > 代码库 > Ajax和跨域
Ajax和跨域
1、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);
}
}
}
2、JSON
全称JavaScript Object Notation，是一种存储和交换信息的表示法，类似XML，它采用【键值对】的方式组织，易于及其解析，
json是独立于语言的，只要按照规则任何语言都可以解析json，
与xml相比，json长度短，读写速度快，可以使用js内建的方法eval()解析转换为js对象，
表示：json值可以是字符串（用双引号）、对象（用{}）、数组（用[]）、数字、true/false、null，
如，var jsondata=http://www.mamicode.com/‘{"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方法
3、用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对象
})
4、跨域
域名：http://www.abc.com:8080/index.js
http://协议
www子域名
abc.com主域名
8080端口号（http协议的默认端口号为80，一般可以省略）
协议、子域名、主域名、端口号其中任意一个不同，就叫做不同域，不同域之间相互请求资源叫作“跨域”。
JavaScript出于安全考虑，不允许跨域即同源策略，但是<script><img>这些含有src属性的标签没有同源策略，所以
处理跨域方法1：jsonp
原理：给<script src="http://www.mamicode.com/跨域的文件的地址"></script>，这个跨域的文件返回跨域的服务器端数据。因此json只支持GET请求，不支持POST请求。
在www.aa.com页面中
<script src=http://www.mamicode.com/“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":"找到员工：***"})‘;
查看调试工作台：
Ajax和跨域