集成用多了連這都忘了系列(三)

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協議跨域

總結

以上是生活随笔為你收集整理的ajax跨域服务器404,Ajax和跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。