jQuery Ajax analysis encyclopedia

This time I will bring you a complete analysis of jQuery Ajax, what are the precautions when using jQuery Ajax, the following is a practical case, let's take a look.

What is Ajax

AjaxBasic concepts

##Ajax( Asynchronous JavaScript and XML): Translated into Chinese is asynchronous JavaScript and XML.

Functionally, it is a technology that can update part of a web page without reloading the entire web page.

Traditional web page

If you want to update content or submit a form, you need to reload or refresh the page.

Web pages using ajax technology

With a small amount of data exchange through the background server, the web page can achieve asynchronous partial updating.

Before the emergence of Ajax

Before the emergence of Ajax technology, it was a world of synchronous interaction.

Synchronization: The client sends a request, the server processes it, and then responds. During this period, the client is in a waiting state. When the server completes processing the response, the client reloads the page. If If the information is wrong, the client will initiate a request again and wait here.

After the emergence of Ajax

After the emergence of Ajax, the world changed and became an asynchronous world.

Then why didn’t we use asynchronous before? It’s because there was one missing object, the XMLHttpRequest object. Before this object appeared, web development used a synchronous method. After it appeared, we found that asynchronous operations could be performed. This object is used for data exchange between the background and the server, and this data exchange will not reload the entire page. In this case, local data can be updated without refreshing the page. With this object Later, there was Ajax's asynchronous loading and partial refresh.

Implementation of Ajax’s asynchronous loading partial refresh function

1. First of all, the first question is how to use the XHR object

1) First instantiate an XMLHttpRequest

var request = new XMLHttpRquest();

Note: Most browsers now support the XMLHttpRequest object and the new method, but in the era of IE6 and below, XHR is only ActiveXObject

Solution:

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

2) Request:

Before we take a look at what HTTP request is

is a way for computers to communicate through the network rule.

It is a stateless protocol that does not retain connection-related information.

The client sends a request to the server, the server responds, and then the connection is closed

A complete HTTP request has seven steps

A. Establish a TCP connection

B. The client sends the requested command to the server

C. The browser sends request header information

D. The server sends a response

E. The server sends response header information

F. The server sends data to the browser

G. The server closes the TCP connection

Looking at it separately: the HTTP request is divided into four parts

HTTP request method and action (get, pos)

The URL being requested (request address)

Request header (including client environment information, authentication information, etc.)

Request body, Request text.

Get request: Generally used to obtain information (http default request method)

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()使用详解

The above is the detailed content of jQuery Ajax analysis encyclopedia. For more information, please follow other related articles on the PHP Chinese website!