首页 > 代码库 > 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":"找到员工:***"})‘;

查看调试工作台:

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异步请求和跨域的理解,终于写完啦啦啦

禁止转载

Ajax和跨域