• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

一个简单的Ajax请求例子_js

javascript 程序员 7年前 (2018-06-21) 175次浏览 已收录 0个评论

  Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术。通过Ajax,您可以使用 JavaScriptxmlHttpRequest对象来直接与服务器进行通信。您可以在不重载页面的情况与 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请求例子 - Admin10000.com </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方式向服务器发送请求,并且传递参数。

http://www.gaodaima.com/51838.html一个简单的Ajax请求例子_js

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请求例子_js AjaxDemo

资源下载:XMLHttp对象中文参考手册

欢迎大家阅读《一个简单的Ajax请求例子_js》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一个简单的Ajax请求例子_js
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址