Detailed explanation of the use of AJAX's XMLHttpRequest object

This time I will bring you a detailed explanation of the use of AJAX's XMLHttpRequest object. What are the precautions when using AJAX's XMLHttpRequest object. Here are actual cases, let's take a look.

AJAX is a web development technology for creating interactive web applications. It is a collection of asynchronous Javascript and XML. Its core is the XMLHttpRequest object, which can partially update web pages without submitting the entire page to the server. It is a key technology in the AJAX Web application architecture.
Basic attributes:

Basic method:

##XMLHttpRequest five-step method:​​​​

First: Create an XMLHttpRequest object
Second: Register
Callback functionThird: Set parameters for interaction with the server
Fourth: Set the data sent to the server and start interaction with the server
Fifth: Determine whether the interaction with the server is completed, and whether the server returns correct data
HTML code:

nbsp;html> 
 
 
<meta> 
 <title></title> 
 <script> 
  var xmlhttp; 
  function submit() {    
   //1、创建XMLHttpRequest对象 
   if (window.XMLHttpRequest) { 
    xmlhttp = new XMLHttpRequest(); 
    if (xmlhttp.overrideMineType) {//针对某些特定版本的mozillar浏览器的BUG进行修正 
     //将覆盖发送给服务器的头部，强制 text/xml 作为 mime-type 
     xmlhttp.overrideMineType("text/xml"); 
    } 
   } else if (window.ActiveXObject) {//针对IE浏览器进行处理 
    var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", 
   "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", 
   "MSXML2.XMLHTTP", "Miscrosoft XMLHTTP"]; 
    for (var i = 0; i < activexName.length; i++) { 
     try{ 
      xmlhttp=new ActiveXObject(activexName[i]); 
      break; 
     } catch (e) { } 
    } 
   } 
 
   if (xmlhttp == undefined || xmlhttp == null) { 
    alert("当前浏览器不支持插件XMLHttpRequest对象，请更换浏览器"); 
    return; 
   } 
 
   //2、注册回调函数 
   xmlhttp.onreadystatechange = callback; 
   //获取当前值 
   var username = document.getElementById("userName").value; 
   //设置字符串参数，并进行编码（用于POST提交方式） 
   var args = "username=" + encodeURIComponent(username); 
 
   //GET 交互 
   //3、设置和服务器端交互的参数 
   //xmlhttp.open("GET", "XMLHttpRequest.aspx?username=" + username, true); 
 
   //POST交互 
   //3、设置和服务器端交互的参数 
   //使用Post方式不用担心缓存 
   xmlhttp.open("POST", "XMLHttpRequest.aspx?username=" + username, true); 
   //设置Content-Type类型，告知服务器实体中有参数 
   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
 
 
   //4、设置向服务器端发送的数据，启动和服务器端的交互 
   //用于GET提交 
   //xmlhttp.send(null); 
   //用于POST提交 
   xmlhttp.send(args); 
 
   function callback() { 
    //5、判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据 
    if (xmlhttp.readyState == 4) {//readyState=4表示交互完成 
     if (xmlhttp.status == 200) {//status=200表示正确返回了数据 
      //纯文本数据的接收方法 
      var message = xmlhttp.responseText; 
      var p = document.getElementById("message"); 
      p.innerHTML = message; 
     } 
    } 
   } 
  } 
 </script> 
 
 
 <input> 
 <input> 
 <br> 
 <p></p> 
 

Code in aspx:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
 
namespace XMLHttpRequest五步法 
{ 
 public partial class XMLHttpRequest : System.Web.UI.Page 
 { 
  protected void Page_Load(object sender, EventArgs e) 
  { 
   //Response.Clear(); 
   //获取当前值，get提交使用Request.QueryString方法 
   //string username = Request.QueryString["username"]; 
   //POST提交，使用Request.Form 
   string username = Request.Form["username"]; 
 
   Response.Write("姓名：'" 
    + username + "'<br>时间：'" + DateTime.Now.ToString() + "'"); 
   Response.End(); 
  } 
 } 
}

Summary:

XMLHttpRequest is the core part of AJAX and needs to be understood well. When I first came into contact with it, I didn't understand what was going on, and the video also talked about native AJAX. On the surface, it seemed not easy to understand, but through specific demo practice, you will find that it is actually quite easy to understand.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Ajax and form+iframe method to implement file upload (detailed graphic and text explanation)

##FileUpload implementation Uploading a single file

The above is the detailed content of Detailed explanation of the use of AJAX's XMLHttpRequest object. For more information, please follow other related articles on the PHP Chinese website!