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

2024-09-01 08:28:13

字体：大中小

来源：转载

供稿：网友

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>

上一篇：IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析

下一篇：ajax调用简单实例