AJAX simple asynchronous communication example analysis-JS Tutorial-php.cn

AJAX simple asynchronous communication example analysis

亚连

Release： 2018-05-25 11:44:03

Original

1555 people have browsed it

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>

Copy after login

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

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

Copy after login

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);

Copy after login

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);
}

Copy after login

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>

Copy after login

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!