189 8069 5689

如何实现Ajax请求-创新互联

小编给大家分享一下如何实现Ajax请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联专注于天坛街道网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供天坛街道营销型网站建设,天坛街道网站制作、天坛街道网页设计、天坛街道网站官网定制、微信小程序服务,打造天坛街道网络公司原创品牌,更为您提供天坛街道网站排名全网营销落地服务。

Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过Ajax,您可以使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。您可以在不重载页面的情况与 Web 服务器交换数据。在本文的例子中,我们将演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信。





 
 简单的Ajax请求
 
  var xmlHttp;
  // 创建XMLHttpRequest对象
  function createXMLHttpRequest() {
   if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
   }
  }
  // 整合url参数
  function createQueryString() {
   var name = document.getElementById("txtName").value;
   var sex = document.getElementById("txtSex").value;
   var birthday = document.getElementById("txtBirthday").value;
   var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday);
   return queryString;
  }
  // 按照Get方式传递参数
  function doRequestUsingGET() {
   createXMLHttpRequest();
   var queryString = "AjaxServer.ashx?";
   queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.open("GET", queryString, true);
   xmlHttp.send(null);
  }
  // 按POST方式传递参数
  function doRequestUsingPOST() {
   createXMLHttpRequest();
   var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime();
   var queryString = createQueryString();
   xmlHttp.open("POST", url, true);
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
   xmlHttp.send(queryString);
  }
  // 回调函数
  function handleStateChange() {
   if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
     parseResults();
    }
   }
  }
  // 处理服务器响应内容
  function parseResults() {
   var responseDiv = document.getElementById("serverResponse");
   if (responseDiv.hasChildNodes()) {
    responseDiv.removeChild(responseDiv.childNodes[0]);
   }
   var responseText = document.createTextNode(xmlHttp.responseText);
   responseDiv.appendChild(responseText);
  }
 


 
 

输入你的名字,性别,生日:

               
名字:
性别:
生日:
           

服务器响应内容:

 

下面来详细说明每个JS函数的功能。
createXMLHttpRequest()用来创建XMLHttpRequest对象。
因为IE把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(FF/Safari/Opera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑。
createQueryString()用来整理参数,将Ajax请求要传递的参数整理成一定的格式。
如果传递中文或非ASCII字符必须进行URL编码,本例使用JS的encodeURIComponent()函数进行参数URL编码。
doRequestUsingGET()以HTTP GET方式向服务器发送请求,并且传递参数。
XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数:一个是指示所使用的方法(通常是GET或POST)的串;一个是表示目标资源URL的串;一个是Boolean值,只是请求是否是异步的。
GET请求时,将传递的参数写到open方法的url参数中,此时send方法的参数为null。
在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,这就会带来不好的结果,把当前时间戳追加到URL的最后,就能确保URL的惟一性,从而避免浏览器缓存结果。
本例服务器端代码使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向服务器发送请求,并且传递参数。
确保open()中指定的方法是POST,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。设置头信息前必须先调用open方法。
必须使用send方法传递参数。参数的提交格式和GET方法中url的写法一样。
handleStateChange()Ajax回调函数。
对于XMLHttpRequest对象,onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象内部状态发生变化时,就会调用这个回调函数。
parseResults()处理响应结果。

以上是“如何实现Ajax请求”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页标题:如何实现Ajax请求-创新互联
本文路径:http://jkwzsj.com/article/dsoisi.html

其他资讯