【JavaScript】(7)——JavaScript与Ajax交互
来源:互联网 发布:linux日志设置 编辑:程序博客网 时间:2024/06/05 14:46
背景:知识在不断的更新,学习新的技术是非常有必要的,这样才能推陈出新,适应整个软件界的发展。使得用户的体验度越来越高,更好的为人民服务。Ajax技术在一定的程度上能带来更好的用户体验。
一、Ajax
Ajax,是 Asynchronous JavaScript + XML(异步JavaScript和XML)的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新),会带来更好的用户体验。
Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
二、GET请求与POST请求
GET请求
GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到 URL的末尾,以便提交给服务器。
通过URL后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理,中文字符的返回及传参,可以讲页面保存和设置为 utf-8格式即可。
//一个通用的 URL提交函数function addURLParam(url, name, value) {url += (url.indexOf('?') == -1 ? '?' : '&'); //判断的 url是否有已有参数url += encodeURIComponent(name) + '=' + encodeURIComponent(value);alert(url);return url;}
PS:当没有 encodeURIComponent()方法时,在一些特殊字符比如“ &”,会出现错误导致无法获取。
POST请求
POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的 POST传输方式。
而发送 POST请求的数据,不会跟在 URL的尾巴上,而是通过 send()方法向服务器提交数据。
一般来说, 向服务器发送 POST请求由于解析机制的原因, 需要进行特别的处理。 因为POST请求和 Web表单提交是不同的,需要使用 XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
GET请求与POST请求比较
从性能上来讲 POST请求比 GET请求消耗更多一些, 用相同数据比较, GET最多比 POST快两倍。上一篇《【JavaScript】(6)——JavaScript与XPath、JSON交互》中的的JSON也可以使用 Ajax来回调访问。
var url = 'demo.json?rand=' + Math.random();var box = JSON.parse(xhr.responseText);
三、JavaScript与Ajax
因为 Ajax使用起来比较麻烦,主要就是参数问题,比如到底使用 GET还是 POST;到底是使用同步还是异步等等,我们需要用JavaScript封装一个Ajax函数,来方便我们调用。
//封装Ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' + Math.random(); obj.data = params(obj.data);if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;if (obj.async === true) { xhr.onreadystatechange = function () { if(xhr.readyState==4)callback(); };} xhr.open(obj.method,obj.url,obj.async);if(obj.method==='post'){ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(obj.data);}else{ xhr.send(null);}if(obj.async===false){ callback();}function callback(){ if(xhr.status==200){ obj.success(xhr.responseText); //回调}else{ alert('数据返回失败!状态代码: '+xhr.status+',状态信息: '+xhr.statusText); } }}//调用ajaxaddEvent(document,'click',function(){ //IE6需要重写addEventajax({method:'get',url:'demo.php',data:{'name':'Lee','age':100},success:function(text){alert(text);},async:true});});//名值对编码function params(data){var arr=[];for(var i in data){arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i])); } return arr.join('&');}
四、学习心得
1、即使再好的工具也有它的缺点,但是可以借助外界的力量让自己变得更加完美。人生就像一张心电图,只有高低起伏才代表活着,而成了平线之后,就代表死亡了。所以只有起起伏伏的人生才是完整的人生。
2、封装 Ajax并不是一开始就形成以上的形态,需要经过多次变化而成。调试错误也是一样的,很多错误并不是一下子就能调出来的,多试试,不同的方法有着不一样的收获。
- 【JavaScript】(7)——JavaScript与Ajax交互
- 【JavaScript】(5)——JavaScript与cookie、XML交互
- 【JavaScript】(6)——JavaScript与XPath、JSON交互
- 后台函数与Javascript交互(非AJAX)
- JavaScript与HTML交互——事件
- QT——与 Javascript 交互
- JavaScript与HTML交互——事件
- JavaScript与HTML交互——事件
- 【Servlet】Servlet3.0与纯javascript通过Ajax交互
- JavaScript基础——Ajax与Comet
- applet与javascript交互
- applet与javascript交互
- javascript与xml交互
- Silverlight与JavaScript交互
- Flex与JavaScript交互
- PHP与JavaScript交互
- ATL与JavaScript交互
- WinForm与Javascript交互
- openSUSE下安装MySQL
- 小米手机无法连接eclipse调试解决方案
- 设计原则
- 未来的认知工作负载需要全新的IT基础架构
- 奇异值分解
- 【JavaScript】(7)——JavaScript与Ajax交互
- Win_Sockets_Tcp
- Nutch下载及构建
- windows注册Tomcat服务
- Oracle存储过程实战案例分享。
- CPP 6th——运算符重载+函数重载+函数模板
- Objective-C内存管理第二弹:多个对象的内存管理
- [Coursera]算法基础_Week7_广搜_Q1
- Java Nio 四、Java NIO Buffer