jQuery Ajax解析大全

這次帶給大家jQuery Ajax解析大全，jQuery Ajax使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是Ajax

Ajax#基本概念

Ajax( Asynchronous JavaScript and XML):翻譯成中文就是非同步的JavaScript和XML。

從功能來看是一種在無需重新載入整個網頁的情況下能夠更新部分網頁的技術。

傳統的網頁

想要更新內容或提交表單就要重新載入或重新整理頁面。

使用ajax技術的網頁

透過後台伺服器進行少量的資料交換，網頁就可以實現非同步局部跟新。

Ajax出現前

Ajax技術出現之前，是一個同步互動的世界。

同步：客戶端發出請求，服務端去處理，然後回應，這段時間客戶端是處在等待的狀態，當服務端處理回應完成之後呢，客戶端重新載入頁面，如果中間訊息錯誤那麼客戶端就會再次發起請求在此等待。

Ajax出現之後

Ajax出現之後世界變了 變成了異步的世界。

那我們為什麼之前不使用異步呢，是因為之前少了一個物件XMLHttpRequest物件,在這個物件出現之前網頁開發都是採用同步的方式,出現之後呢發現可以進行了異步的操作，這個物件是用於後台和服器之間進行資料交換，而且這個資料的交換不會重新載入整個頁面，這種情況下呢實現了在不刷新頁面的情況下對局部資料的更新，有了這個對象之後呢才有了Ajax的非同步載入局部刷新。

Ajax的非同步載入局部刷新功能的實作

1.首先第一個問題就是XHR這個物件怎麼使用

1）先實例化一個XMLHttpRequest

var request = new XMLHttpRquest();

注意：現在大部分的瀏覽器都支援XMLHttpRequest物件和new這種方式，但是呢在IE6及以下版本的時代中呢XHR還只是ActiveXObject

解決方法：

Var request; 
If(window.XMLHttpRequest){ 
Reuest = new XMLHttpRequest(); 
}else{ 
Request = new ActiveXObject(“Microsoft.XMLHTTP”); 
}

2)請求：

在這之前我們來看看什麼事HTTP請求

是一種電腦透過網路進行通訊的規則。

是一種無狀態協議，不保留連接的相關訊息，

客戶端向伺服器發出請求，伺服器回應，之後呢連線就被關閉

#一個完整的HTTP請求有七個步驟

    A.建立TCP連線

    B.客戶端向伺服器發送請求的命令

    C.瀏覽器傳送請求頭資訊

    D.伺服器給予回應

    E.伺服器傳送應答頭資訊

#    F.伺服器傳送資料

##    F.伺服器向瀏覽器傳送資料

    G.伺服器關閉TCP連線分開來看：HTTP請求分為四個部分

HTTP請求的方法和動作（get,pos）

正在請求的URL（請求地址）

請求頭（包含客戶端環境信息，身份驗證信息等）

請求體，請求正文。

Get請求###：一般用於資訊取得（http預設求求方式）###

Url传参属性和值都是可见的，对所发内容大小有限制 一般在2000个字符

get请求安全的说法是因为你请求一次和请求一万次效果是一样的不会对数据造成影响。

Post请求：一般用于服务器数据修改

对所发信息没有大小限制

HTTP响应有三部分

1)一个数字和文字组成的状态吗，用来显示请求是成功还是失败

2)响应头，和请求头信息一样包含很多信息，例如服务器类型，日期时间，内容类型和长度等

3)响应体，响应正文

HTTP响应状态吗由三位数字组成，首位数字定义了状态码的类型：

1xx：信息类，表示接收到浏览器请求，正在进一步处理

2xx:成功表示用户请求被正确接受

3xx:重定向，表示没有请求成功，客户必须采取进一步的动作

4xx:客户端错误，表示客户端请求有错误404NOTFound意味着请求中所引用的文档不存在

5xx：服务器错误，表示服务器不能完成对请求的处理

通过XMLHttpRequest发送请求

1.创建

var request = new XMLHttpRquest();

2.发送请求

两个方法：

open(method,url,async),Send(string)这两种方法可以将请求发送到服务器

Request.open(get,get.php,true)
Request.Send()
Request.open(post,post.PHP,true) 
Request.Send()
Request.open(post,post.php,true) 
Request.setRequestHeader(‘Content-Type','application/x-www-form-urlencoded') 
Request.send(“name=王二狗&sex=男”);

send()中的内容是要向后台传递的参数，在get请求是通过url传递参数，所以get中send()里面的内容可以省略，post方式中不能省略，省略了之后就是无意义的请求了

setRequestHeader是用来设置请求参数的类型，form

3.获取响应

responseText:获取字符串形式的响应式数据

responseXML:

Status和statusText：以数字和文本形式返回HTTP状态吗

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询相应中的某个字段的值

在响应返回成功时得到的通知，在实际操作中要监听

readyState属性的变化，他的变化代表着服务器相应的变化

0：表示服务器请求未初始化，open还没有被调用

1：服务器连接已经建立，open已经被调用

2：请求已经被接受，接收到头部信息

3：处理中，接收到相应主体

4：请求完成，并且响应完成

Var request=new XMLHttpRequest();
Request.open(get,url,true)
Request.send();
request.onreadyState=function(){
 If(request.readeyState===4&&request.Status===200){
 做一些事情 request.responseText
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用Jquery获取iframe页面中Dom元素

$.ajax()使用详解

以上是jQuery Ajax解析大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！