什么是Ajax,有哪些重点概念及怎样运用
Admin 2022-11-15 群英技术资�
今天我们来学习关于“什么是Ajax,有哪些重点概念及怎样运用”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下吧�
什么是Ajax�
Ajax有哪些重点概念?
Ajax如何运用�
听说JQuery与Ajax更配�
1、AJAX全称:异步的JavaScript和XML
2、AJAX不是编程语言,是一种无需重新载入整个页面,能够更新部分网页的技术�
3、要想更新内容或者提交一个表单,就要重新载入整个页面;使用AJAX技术的页面,通过与后台服务器进行少量的数据交换,就可以实现异步局部更新�
4、同步和异步�
同步:需要更新内容或者提交表单时,需要对整个页面向服务器请求->服务器处理、响�->页面载入
如果错误,再次请求,等待,响应;需要对整个页面解析重新载入,很多时候等待的时间很长,让人很抓狂�
异步:针对页面部分内容进行请求,服务器处理响应,页面刷新载入这一部分;这中间不会影响页面其他交互,无需进行等待,提升了用户体验�
IE5、IE6支持Active X对象�
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象�
在新浏览器上,创建对象很简单,使用构造函数:var xhr=new XMLHttpRequest();老浏览器可能不常用,但我们要考虑在里边,兼容老浏览器�
function createXHR(){ if(typeof XMLHttpRequest !="undefined"){ //如果浏览器不支持XMLHttpRequest对象,就使用IE5、IE6对象ActiveXObject return new XMLHttpRequest(); }else if(typeof ActiveXobject !="undefined"){ if(typeof arguments.callee.activeXString !="string"){ var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i,len; for(i=0,len=versions.length;i<len;i++){ try{ new new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; }catch(ex){ // } } } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("No XHR object available"); } }
这个函数首先检测原生XHR对象是否存在,如果存在,就返回它的实例。XHR不存在,检测ActiveX对象;否则,抛出错误�
创建兼容的XHR对象就可以使用:var xhr=createXHR();
在运用Ajax之前,我认为先了解HTTP更有助于理解Ajax方法�
HTTP是一种应用进程与服务器之间连接的协议,无状态协议,也就是没有记忆,每一次请求都需要重新建立连接�
HTTP请求过程�
1>建立TCP连接
2>Web浏览器向Web服务器发送请求命�
3>Web浏览器发送请求头信息
4>Web服务器应�
5>Web服务器发送应答头信息
6>Web服务器向浏览器发送数�
7>Web服务器关闭TCP连接
HTTP状态码�
向服务器发送请求,需要使用XMLHttpRequest对象的open()和send()方法�
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求� |
method:请求的类型;GET � POST | |
url:文件在服务器上的位� | |
async:true(异步)� false(同步) | |
send(string) | 将请求发送到服务器� |
string:仅用于 POST 请求 |
发送请求:
xhr.open("get","example","false")//同步xhr.send(null);同步:JavaScript 会等到服务器响应就绪才继续执行�
异步:在等待服务器响应时执行其他脚本�
当响应就绪后对响应进行处理�
� 当服务器响应后会填充XHR对象属�
->responseText 获得字符串形式的响应数据�
->responseXML 获得 XML 形式的响应数据�
->status 响应的HTTP状态码
->statusText HTTP状态码说明
� 异步下检测XHR对象的readyState属性,请求过程中的活动阶段�
->0:未初始化,尚未调用open()方法
->1:启动,已经调用open()方法,但未调用send()方法
->2:发送,已经调用send()方法,尚未接到响�
->3:接收,已接收部分数据
->4:完成,已经接收全部响应数据�
readyState改变就会触发一次readyStatechange事件,可以利用这个事件来检测readyState变化的值。必须在open()之前指定onreadyStatechange事件处理程序�
var xhr=createXHR(); xhr.onreadyStatechange=function(){ if(xhr.readyState==4){ if(xhr.status >=200 && xhr.status<300){ alert(xhr.responseText); }else{ alert("Request was unsuccessful:"+xhr.status); } } } xhr.open("get","example.txt",true); xhr.send(null);
默认情况下,在发送XHR请求的同时,还会发送一些默认的头部信息�
使用 setRequestHeader() 可以设置自定义的请求头部信息:这个方法接�2个参数,头部字段的名称和头部字段的值�
setRequestHeader() 方法必须在open()后,send()前调�
xhr.open("get","example.txt",true); xhr.setRequestHeader("myheader","myvalue"); xhr.send(null);
调用XHR对象的getRequestHeader() 方法,并传入头部字段名称可以取得相应的响应头部信息�
� get请求、post请求
xhr.open("get","example.php?name1=value1&name2=value2",true);
可向现有url后添加查询字符串参数�function addURLParam(url,name,value){ url +=(url.indexOf("?") == -1 ? "?" : "&");//检测url后是否已有参� url +=encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; } //示例 var url="example.php"; //添加参数 url=addURLParam(url,"name","Nico"); //初始化请� xhr.open("get",url,true);
var xhr=createXHR(); //省略 xhr.open("POST","ajax_test.asp",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var form=document.getElementById("user-info"); xhr.send(serialize(form));
jQuery get() � post() 方法用于通过 HTTP GET � POST 请求从服务器请求数据�
$("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });``` + jQuery $.post() 方法 语法�$.post(*URL*,*data*,*callback*); 必需� *URL* 参数规定您希望请求的 URL� 可选的 *data* 参数规定连同请求发送的数据� 可选的 *callback* 参数是请求成功后所执行的函数名� 例子�
$("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });
$.post() 的第一个参数是我们希望请求� URL ("demo_test_post.asp")�
然后我们连同请求(name � city)一起发送数据�
"demo_test_post.asp" 中的 ASP 脚本读取这些参数,对它们进行处理,然后返回结果�
第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态�
######四、运用Ajax
现在一般都用JQuery-Ajax,学习了之后,我还是有疑惑,知识清楚了之后如何运用?用在哪里�
想着给自己出个demo运用刚学的知识,等待更新。。�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
JavaScript如何改变this指向?下面本篇文章给大家介绍一下JS改变this指向的三种方法,希望对大家有所帮助�
简介Diffie-Hellman(简称DH)是密钥交换算法之一,它的作用是保证通信双方在非安全的信道中安全地交换密钥。目前DH最重要的应用场景之一,就是在HTTPS的握手阶段,客户端、服务端利用DH算法交换对称密钥。下面会先简单介绍DH的数理基础,然后举例说明如何在nodejs中使用DH相关的API。数论基础要理解DH算法,需要掌握一定的数论基础。感兴趣的可以进一步研究推导过程,或者直接记
这篇文章主要为大家详细介绍了vue实现触底查询功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了Vue3� 页面,菜单,路由的使用,文章围绕Vue3页面,菜单,路由相关资料展开详细内容,需要的朋友可以参考一�
这篇文章主要介绍了uni-app 的模板语法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价�,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078