Ajax异步交互
来源:互联网 发布:网络直播的看法与态度 编辑:程序博客网 时间:2024/06/08 08:31
Ajax异步交互
传统的同步交互必须一件一件事情按顺序完成,而异步交互使得页面能够同时处理多件事情。经历两个步骤,第一创建异步对象,第二,打开并发送请求,下面是异步交互一个简单示例。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>XMLHttpRequest</title> <!--<script language="javascript">--> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { //浏览器兼容 if (window.ActiveXObject) { //如果是IE xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { //不是IE xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); var surl = "9-1.aspx?" + new Date().getTime();//由于IE会自动缓存异步通信,所以需要使每次异步请求的地址都不相同 xmlHttp.open("GET", surl, 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>
GET和POST模式
通常在HTML请求中有GET和POST两种模式,这两种模式都可以异步请求发送数据的方式。如果是GET请求,则直接将数据异步请求的URL地址中,而send方法任何数据。例如:
var queryString = "9-3.aspx?"; queryString += createQueryString() + "×tamp=" + new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET",queryString); xmlHttp.send(null);
如果是POST模式则将数据统一在send()方法中发送,请求地址没有任何消息,并且必须设置请求文件头,例如:
var url = "9-3.aspx?timestamp=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open("POST",url); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(queryString);
以下是GET和POST两种模式的代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>GET VS. POST</title><script language="javascript">var xmlHttp;function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); else if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();}function createQueryString(){ var firstName = document.getElementById("firstName").value; var birthday = document.getElementById("birthday").value; var queryString = "firstName=" + firstName + "&birthday=" + birthday; return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题}function doRequestUsingGET(){ createXMLHttpRequest(); var queryString = "9-3.aspx?"; queryString += createQueryString() + "×tamp=" + new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET",queryString); xmlHttp.send(null);}function doRequestUsingPOST(){ createXMLHttpRequest(); var url = "9-3.aspx?timestamp=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open("POST",url); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(queryString);}function handleStateChange(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var responseDiv = document.getElementById("serverResponse"); responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码 }}</script></head><body><h2>输入姓名和生日</h2><form> <input type="text" id="firstName" /><br> <input type="text" id="birthday" /></form><form> <input type="button" value="GET" onclick="doRequestUsingGET();" /><br> <input type="button" value="POST" onclick="doRequestUsingPOST();" /></form><div id="serverResponse"></div></body></html>
0 0
- jquery ajax异步交互
- AJAX异步交互
- 使用ajax异步交互
- AJAX异步交互通信
- ajax实现异步交互
- Ajax异步交互
- ajax异步交互
- Ajax异步交互
- Ajax实现异步交互
- ajax异步交互
- 浅析Ajax异步交互
- AJAX异步交互
- ajax异步交互
- Ajax 异步处理 servlet 交互
- jquery+ajax+ashx Ajax异步数据交互
- ajax+json 做数据异步交互
- 采用AJAX实现网站异步交互过程
- Ajax实现异步交互完成注册页面
- 作业——在线学习Android课程之第十三周(图片优化)
- 面向对象软件工程与UML
- 数据库
- CodeForces 366A Dima and Guards
- 五月英语总结
- Ajax异步交互
- 《Java 8函数式编程》 读书记录
- 关于iOS开发的学习资料
- 迭代器辅助函数
- Centos 6.5 Redis 单机部署
- 杭电1003
- win8.1系统快速关机的两种方法
- 用指针变量输出二维数组
- 排序算法