jQuery Ajax 解析百科事典-jsチュートリアル-php.cn

jQuery Ajax 解析百科事典

php中世界最好的语言

リリース： 2018-04-24 15:01:03

オリジナル

1261 人が閲覧しました

今回は jQuery Ajax の完全な分析をお届けします。jQuery Ajax を使用する際の注意事項は何ですか? 実際のケースを見てみましょう。

Ajaxとは

Ajax基本概念

Ajax（非同期JavaScriptとXML）：中国語に訳すと非同期JavaScriptとXMLです。

機能的には、Webページ全体を再読み込みすることなく、Webページの一部を更新できる技術です。

従来の Web ページ

コンテンツを更新したりフォームを送信したりする場合は、ページを再読み込みまたは更新する必要があります。

Ajax技術を使用したWebページ

は、バックエンドサーバーを介して少量のデータを交換し、Webページは非同期の部分更新を実現できます。

Ajax の出現前

Ajax テクノロジーが出現する前は、同期対話の世界でした。

同期: クライアントはリクエストを送信し、サーバーがそれを処理してから応答します。この期間中、クライアントは待機状態になります。サーバーが応答の処理を完了すると、クライアントはページをリロードします。情報が間違っている場合、クライアントは再度リクエストを開始し、ここで待機します。

Ajaxの出現後

Ajaxの出現後、世界は変わり、非同期の世界になりました。

では、なぜ以前は非同期を使用しなかったのでしょうか? それは、XMLHttpRequest オブジェクトというオブジェクトが 1 つ存在しなかったためです。このオブジェクトが登場した後、Web 開発では同期メソッドが使用されるようになりました。オブジェクトが使用されます。データはバックグラウンドとサーバーの間で交換されますが、このデータ交換ではページ全体がリロードされません。この場合、このオブジェクトを使用した後でのみ、Ajax の非同期ロードで部分更新を行うことができます。

Ajaxの非同期読み込み部分リフレッシュ機能の実装

1. 最初の質問はXHRオブジェクトの使い方です

1) まずXMLHttpRequestをインスタンス化します

var request = new XMLHttpRquest();

注: ほとんどの場合ブラウザーは現在、XMLHttpRequest オブジェクトと新しいメソッドをサポートしていますが、IE6 以下の時代では、XHR は ActiveXObject にすぎません

解決策:

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

ログイン後にコピー

2) リクエスト:

その前に、以下を見てみましょう。 HTTPリクエストとは

コンピュータがネットワークを介して通信するためのルールです。

は、接続に関する関連情報を保持しないステートレスプロトコルです

クライアントがサーバーにリクエストを送信し、サーバーが応答して、接続が閉じられます

完全なHTTPリクエストには7つのステップがあります

A. TCP 接続を確立する

B. クライアントがリクエストコマンドをサーバーに送信する

C. ブラウザがリクエストヘッダー情報を送信する

D. サーバーが応答を返す

E. サーバーが応答を送信するヘッダー情報

F. サーバーブラウザーにデータを送信

G. サーバーが TCP 接続を閉じる

個別に見ると、HTTP リクエストは 4 つの部分に分割されます

HTTP リクエストのメソッドとアクション(get, pos)

リクエストされるURL(リクエストアドレス)

リクエストヘッダ(クライアント環境情報、認証情報等を含む)

リクエストボディ、リクエストボディ。

Get request: 通常、情報を取得するために使用されます (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中文网其它相关文章！