Home > Web Front-end > JS Tutorial > How to use ajax specifically? Four-step analysis using ajax (with examples)

How to use ajax specifically? Four-step analysis using ajax (with examples)

寻∝梦
Release: 2018-09-10 13:57:56
Original
2217 people have browsed it

This article mainly introduces the four steps of using ajax. Students who want to read it should quickly read it. Now let’s start reading this article

1. The first step (getting XMLHttpRequest)

*ajax actually only needs to learn one object: XMLHttpRequest. If you master it, you will master AJAX

#* Get XMLHttpRequest

## > Most browsers support: var xmlHttp=new XMLHttpRequest();

>IE6.0 support: var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

>IE5.5 and earlier versions of IE support: var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

*Write a function that creates XMLHttpRequest

 function createXMLHttpRequest() {
           try{
                    return  new  XMLHttpRequest();
           }catch{
                    try{
                            return
  new  ActiveXObject("Msxml2.XMLHTTP");
                    }catch{ 
                               try{
                                        return  newActiveXObject("Microsoft.XMLHTTP");
                             }catch{
                                  alert("怎么可能,你用的啥浏览器。。。")
                                   throw   e;
                             }
                    }
           }
}
Copy after login

2. Step 2 (Open the connection to the server)

#*xmlHttp.open(); used Opening a connection to the server requires three parameters;

## >Request method: GET or POST

# >Requested URL: Specify the server-side resource, for example: /project/action

## > > Whether the request is asynchronous: If True, it means sending an asynchronous request, otherwise it is a synchronous request; ##*xmlHttp.open("GET","/project/action ",true);

(If you want to see more, go to the PHP Chinese website AJAX Development Manual column to learn) 3 .The third step (Send request)

*xmlHttp.send(null); If null is not given in the brackets, some browsers may not be able to Send;

## > Parameter: It is the content of the request body. If it is a GET request, null must be given

4. Step 4

*在 Register a listener on an event of the xmlHttp object: onredaystatechange

##*xmlHttp object in total There are 5 statuses:

> 0 status: Just created, still The open() method was not called;

>1状态:请求开始,调用了open()方法,但还没有调用send()方法;

>2状态:调用完了send()方法;

>3状态:服务器已经开始响应,但不表示响应结束;

>4状态:服务器响应结束!(我们通常只关注这个状态!!!)

*得到xmlHttp对象的状态;

>var state =xmlHttp.redayState; //可能是0、1、2、3、4

*得到服务器的响应状态码

>var state =xmlHttp.status; //例如为200、404、500

*得到服务器的响应内容

>var  content = xmlHttp.responseText; //得到服务器响应的文本格式内容;
 
     >var  content = xmlHttp.responseXML; //得到服务器响应的xml内容,它是Document对象;
 
 xmlHttp.onredaystatechange=function() { //5种状态都会调用本方法;
 
          if(xmlHttp.redayState==4 && xmlHttp.status==200){  //双重判断,缺一不可
               
 //获取服务器的响应内容
 
                 var  text = xmlHttp.responseText;
 
          }
 };
Copy after login

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

The above is the detailed content of How to use ajax specifically? Four-step analysis using ajax (with examples). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template