Ajax和跨域

Posted 2020-09-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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=‘{"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="跨域的文件的地址"></script>，这个跨域的文件返回跨域的服务器端数据。因此json只支持GET请求，不支持POST请求。

在www.aa.com页面中

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);
}
});