Ajax详解
发布时间:2020-12-16 02:56:56 所属栏目:百科 来源:网络整理
导读:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件,
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。 异步交互:客户端给服务器发送一个请求,服务器给客户端一个响应,响应回来的数据不会把原来的页面覆盖掉,这种我们称为异步交互。 ? ? ?AJAX的应用 1 //利用XMLHttpRequest对象去进行交互. 2 //交互分为四步 3 //1:创建对象 4 var xhr=new XMLHttpRequest(); 5 //2:打开连接 6 //提交方式,提交的地址 7 xhr.open("get","login.php?username=zhangsan"); 8 //3:发送数据 9 xhr.send(null); 10 //4:接收数据,只能通过异步的方式,就是只能通过回调函数的方式. 11 //时刻监听这服务器端状态的改变. onreadystatechange 也是xhr 的一个属性. 12 xhr.onreadystatechange=function(){ 13 //服务器数据响应成功之后会调用这个函数. 14 15 //因为我跟服务器进行交互,服务器会进行处理 16 //在处理的过程当中会不断的给我一些状态. 0,1,2,3,4 17 //每个状态代表的是不同的含义 18 //状态我通过xhr 去获取到试一下. 19 //readyState 属性去获取到 20 //如果状态等于 4 代表响应完成 21 if(xhr.readyState==4){ //响应完成. 22 //console.log("响应完成") 如果响应的是200 才代表响应成功 23 //我们要获取到服务器端状态吗. 24 if(xhr.status==200){ 25 //真正的处理. 26 //响应完成的,响应是成功的. 27 //接收服务器端返回的数据.responseText 用来接收服务器响应的数据的 28 var data=xhr.responseText; 29 document.querySelector("span").innerHTML=data; 30 } 31 } 32 } 33 34 get 交互与post 交互需要注意的细节: 35 get 注意:请求的参数在地址栏当中,send 方法不能省略 36 post 注意需要有一个特殊的请求头 Content-Type: application/x-www-form-urlencoded 37 请求的参数写在send 里面 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |