ajax跨域服务器404,Ajax和跨域
集成用多了连这都忘了系列(三)
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请求。
实战代码：
Documentvar 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协议跨域
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！