Home >Web Front-end >JS Tutorial >AJAX simple asynchronous communication example analysis

AJAX simple asynchronous communication example analysis

亚连Original: 2018-05-25 11:44:031578browse

This article mainly introduces AJAX simple asynchronous communication. It analyzes the techniques and related precautions of Ajax asynchronous communication with examples. It has certain reference value. Friends in need can refer to it.

The examples of this article describe AJAX Simple asynchronous communication method. Share it with everyone for your reference. The specific analysis is as follows:

Client: Sends an empty request to the server.

The code is as follows:

<html>
<head>
<title>XMLHttpRequest</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else if(window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}
function startRequest(){
  createXMLHttpRequest();
  xmlHttp.open("GET","9-1.aspx",true);
  xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
      alert("服务器返回: " + xmlHttp.responseText);
  }
  xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
</body>
</html>

##Server side: Returns a character directly to the client string.

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.Write("异步测试成功，很高兴");
%>

Question 1:

Because the IE browser automatically caches the results of asynchronous communication, it will not update the server's return results in real time. (But Firefox will refresh normally)

In order to solve the cache problem of IE when connecting to the server asynchronously, change the client code as follows:

var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不断的变化
xmlHttp.open("GET",sUrl,true);

Add a millisecond parameter of the current time at the end of the accessed server address, so that the URL address of each request is different, thus deceiving the IE browser to solve the update problem caused by IE cache.

Question 2:

When testing the program, if the client and server are both on the same computer, the asynchronous object returns the http status code status of the current request == 0 , so the client code is changed again as follows:

//if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
if( xmlhttp.readyState == 4)
{
   if( xmlhttp.status == 200 || //status==200 表示成功！
     xmlhttp.status == 0 ) //本机测试时，status可能为0。
      alert("服务器返回: " + xmlHttp.responseText);
}

So, the final client code is as follows:

<html>
<head>
<title>XMLHttpRequest</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else if(window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}
function startRequest(){
  createXMLHttpRequest();
  var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不断的变化
  xmlHttp.open("GET",sUrl,true);
  xmlHttp.onreadystatechange = function(){
    //if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
    if( xmlhttp.readyState == 4)
    {
     if( xmlhttp.status == 200 || //status==200 表示成功！
       xmlhttp.status == 0) //本机测试时，status可能为0。
      alert("服务器返回: " + xmlHttp.responseText);
     }
  }
  xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
</body>
</html>

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

Detailed explanation of AJAX mechanism and cross-domain communication

Performance optimization method of Ajax non-refresh paging

Implement ajax image upload based on firefox

The above is the detailed content of AJAX simple asynchronous communication example analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Detailed explanation of AJAX mechanism and cross-domain communicationNext article：Detailed explanation of AJAX mechanism and cross-domain communication

See more

AJAX simple asynchronous communication example analysis

Related articles