AJAX基础简介

    Ajax是几个单词首字母的缩写:Asynchronous JavaScript and XML(异步的JavaScript 和 XML),Ajax并不是全新的技术,而是整合了几种现有的技术:JavaScript、XML与CSS。主要是JavaScript,我们通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并返回结果的任务,然后使用JavaScript更新局部的网页。异步指的是JavaScript脚本发送请求后并不是一直等待着服务器响应,而是发送请求后继续做别的事,请求响应和处理是异步完成的。XML一般用于请求数据和响应数据的封装,CSS用于美化页面样式。

    XMLHttpRequest是Ajax开发的基础,它提供了客户端与服务器端进行异步通信的能力。一方面它向服务器提交一个请求,获取指定页面的内容;另一方面将数据通过JavaScript发送到服务器端后,按预期的方式对数据进行处理,结合XML与CSS,做出各种应用程序。

特点:

前导:Ajax通过js语法的异步网络请求技术,实现页面局部更新,之前所使用的的form表单、a标签都是全部更新页面 

异步:在执行到耗时操作时,先去执行其他代码,等耗时操作处理完毕后,再通过回调函数处理耗时操作 
同步:在执行到耗时操作时,会一直等待直到操作处理完毕,再去执行其他代码。 

1、如何创建ajax对象 
1)创建一个对象,检查浏览器是否支持XMLHttpRequest对象,其实现在所有浏览器都支持XMLHttpRequest对象,除了该死的IE5,IE6,如果不支持的话,创建ActiveXObject对象,对!我们做这一步就是为了IE5、6小婊砸 
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’); 
2)配置请求参数,第一个参数是请求方法(GET/POST,浏览器请求方法不只这两种,只不过其他情况不适用),第二个参数是请求路径,如果GET请求的接口需要接口参数,则只需把接口参数拼接在接口之后即可,接口和参数之间使用“?”链接,参数和参数之间使用“&”链接,key值和value值之间使用“=”链接,如果GET请求中的参数有可能出现中文,为了增强代码健壮性,我们需要使用encodeURI()函数对中文进行编码操作第三个参数是否异步请求(true/false),默认为true,表示异步请求 
xhr.open(‘GET’,url,true); 
3)发送请求,因为我们这次是GET请求,请求参数已经拼接在url里面所以不需要再次传入,所以在send()参数位置传入null,表示没有任何数据,如果请求方式为POST,send()方法里面传入要传送的数据 
xhr.send(null); 
4)监听一个请求事件,收到浏览器的返回信息就会触发一次事件 
xhr.onreadystatechange = function( ){ 
//判断条件表示请求数据已加载完毕,服务器已成功处理请求 
if(xhr.readyState == 4 && xhr.status == 200){ 
console.log(xhr.responseText); 

}

猜你喜欢

转载自blog.csdn.net/qq_41898169/article/details/80006631