Home > Web Front-end > JS Tutorial > A brief discussion on ajax request technology

A brief discussion on ajax request technology

亚连
Release: 2018-05-23 15:55:35
Original
1651 people have browsed it

Now I will bring you a brief discussion on ajax request technology. Let me share it with you now and give it as a reference for everyone.

1. Write in front:

Reading requirements:

Have a certain amount of HTML, CSS, JavaScript, Json basics

2. What is ajax

Ajax: namely "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML) , refers to a web development technology for creating interactive web applications.

3. Why use ajax

In dynamic web development technology, the client (usually the browser) interacts with the server for data It is very frequent. How to save network resources and provide a good user experience is very critical. Ajax uses an asynchronous request method, which allows data interaction with the background to update content without refreshing the entire page...

4. How to use native ajax

The key point of using ajax technology falls on the XMLHttpRequest (Note: ie5, ie6 uses ActiveXObject) object, so making good use of this object is the key

Note:

  

function loadData() {
  //创建XMLHttpRequest对象
  var xmlHttpRequestObj = {};
  //创建json对象,传送json格式数据到服务端
  Var jsonObj = {};
  if (window.XMLHttpRequest) {
  // IE7+, Firefox, Chrome, Opera, Safari
     xmlHttpRequestObj =new XMLHttpRequest();
   } else {
     // IE6, IE5
     xmlHttpRequestObj =new ActiveXObject("Microsoft.XMLHTTP");
   }
  //当请求状态改变时会调用xmlHttpRequestObj .onreadystatechange方法
    xmlHttpRequestObj .onreadystatechange = function() {
     if (xmlHttpRequestObj .readyState == 0 ) {
      Alert(“open()函数未执行”);
       } else if(xmlHttpRequestObj.readyState == 1) {
        Alert(“open()函数已执行,send()函数未执行”);
     } else if(xmlHttpRequestObj.readyState == 2) {
        Alert(“send()函数已执行,头部和状态码可以获取”)
     } else if(xmlHttpRequestObj.readyState == 3) {
        Alert(“头部已收到,解析响应体”);
    } else if(xmlHttpRequestObj.readyState == 4) {
        Alert(“请求完成”);
        If (xmlHttpRequestObj.status == 200) {
          Alert(“响应就绪,反序列化json对象填充数据到页面”);
        } else if (xmlHttpRequestObj.status == 400) {
          Alert(“页面丢失”);
        } else {
          Alert(“服务异常”);
        }
    }
   }
  //method:请求方式:GET、POST、PUT、DELETE... Url:请求的地址 asnyc:是否采用异步
  xmlHttpRequestObj.open("method", "url", async);
  //设置请求头,POST请求格式需要载入,其他不需要
  xmlHttpRequestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  //请求数据,参数为jsonObj json对象
  xmlHttpRequestObj.send(jsonObj);
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax loading chrysanthemum loding effect

##Ajax php realizes three-level linkage of product classification

Ajax technology composition and core principle analysis

The above is the detailed content of A brief discussion on ajax request technology. 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