欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

非常简单的Ajax请求实例附源码

程序员文章站 2022-06-09 09:21:02
ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术。通过ajax,您可以使用 javascript的xmlhttprequest对象...

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

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>简单的ajax请求</title>
 <script type="text/javascript">
  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);
  }
 </script>
</head>
<body>
 <form action="#">
 <h2>输入你的名字,性别,生日:</h2>
 <table>
  <tr><td>名字:</td><td><input type="text" id="txtname" /></td></tr>
  <tr><td>性别:</td><td><input type="text" id="txtsex" /></td></tr>
  <tr><td>生日:</td><td><input type="text" id="txtbirthday" /></td>
  </tr>
 </table>
 <input type="button" value="用get方式传参数" onclick="dorequestusingget();"/>
 <br /><br />
 <input type="button" value="用post方式传参数" onclick="dorequestusingpost();"/>
 </form>
 <br />
 <h3>服务器响应内容:</h3>
 <div id="serverresponse"></div>
</body>
</html>

下面来详细说明每个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请求实例