集成用多了连这都忘了系列(三)

AJAX

1.什么是Ajax

ajax=异步js和XML，是一种用于创建快速动态网页的的技术，可以在整个网页不刷新的情况下对网页的某一部分进行更新.

2.ajax工作原理

ajax原理.PNG

3.XMLHttpRequest对象

3.1 创建XMLHttpRequest对象

var xml=new XMLHttpRequest()

实战代码：

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest()

}else{

//IE5，IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

3.2 使用XMLHttpRequest对象的open()和send()方法

open(GET/POST，url，同步：true/异步：false)规定请求的类型，URL，以及是

否异步处理，ajax用true.

send(string)将请求发送到服务器

实战代码：

var xmlhttp

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest()

}else{

//IE5，IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

xmlhttp.onreadystatechange=function){

if(xml.readyState==4&&xmlhttp.status==200){

document.getElementById"myDiv").innerhtml=xmlhttp.responseText

}

}

//GET

xmlhttp.open("GET"，"xxxxxx"，true)

xml http.send()

//POST

xmlhttp.open("POST"，"xxxxxx"，true)

//如果要表单提交，需要添加http头信息

xmlhttp.setRequestHeader("Content-type"，"application/x-www-form-urlencoded")

xmlhttp.send("name=tom&id=001")

3.3 获取服务器的响应

1)相应内容为XMLHttpRequest.responseText或者 XMLHttpRequest.responseXML

2)如果是XML格式，需要解析，遍历即可

xml=xmlhttp.responseXML

var x=xml.getElementByTagName("result")

var txt=""

for(i=0；i

xt=txt+x[i].childNodes[0].nodeValue+"
"

}

document.getElementById("myDiv").innerHTML=txt

3.4 请求被send之后，需要监听服务器响应

当readyState改变时，会触发onreadystatechange事件

readyState的值：

0:请求未初始化

1:已与服务器建立连接

2:请求已接收

3:处理中

4:完成，响应就绪

status：

200:"OK"

404:未找到页面

所以只要监听onreadystatechange函数，同时判断readyState是否为4且status为

200，就能判断是否响应成功

跨域

1.什么是跨域

url的协议，域名，端口任意一个与当前的url不同时，就是跨域，浏览器的同源限制会阻止该访问。无法访读取非同源的cookie，localStorage，indexedDB，以及访问DOM，发送AJAX 请求。

2.如何解决

1.JSONP

原理：web调用js文件不受跨域限制，所以可以通过调用服务器上的js文件获得JSOＮ文件，但是这种方法只能发送GET请求。

实战代码：

Document

var callbackHandler=function(result){

alert("查询结果："+result)

//服务器会调用callbackHandler，并将结果用参数的方式返回

}

var url="http://xxxx.com/xxx.php?id=0001&callback=callbackHandler"

var script=document.createElement("script")

script.setAttribute("src",url)

document.getElementByTagName("head")[0].appendChild(script)

/* 等同于直接写

2.CORS

CORS又叫跨域资源共享， 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，只需要后端服务器实现CORS接口即可。浏览器将CORS请求分成两类：简单请求(simple request)和非简单请求(not-so-simple request),为什么要分为简单请求和非简单请求，因为浏览器对这两种请求方式的处理方式是不同的。

2.1简单请求

请求方式为HEAD、POST 或者 GET

http头信息不超出以下字段：

Accept、Accept-Language 、

Content-Language、

Last-Event-ID、

Content-Type(限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain)

(1) 对于简单请求，前端一般啥也不用干，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。

GET /cors HTTP/1.1

(2)服务器收到之后，一看发现origin这个源在许可范围内，“好嘞~你可以进了！”

//必须有的字段：可以是*也可以是许可的源

Access-Control-Allow-Origin: http://api.bob.com

//可选，表示是否允许发送cookie，不允许就没有此字段

Access-Control-Allow-Credentials: true

//可选，不设置的情况下只有Cache-Control、Content-Language、Content-Type、、、Expires、Last-Modified、Pragma六中，不设置就没有该字段

Access-Control-Expose-Headers:xxx

(3)如果不在许可范围，也会返回正常http的反应，只是这个回应的头信息没有包含Access-Control-Allow-Origin字段，浏览器会报错。

2.2非简单请求

请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json或者是自定义类型。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求(preflight)。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

3.WebSocket协议跨域