ajax学习

1.概念

JavaScript和服务器端异步通信的一门技术。

AJAX = 异步 JavaScript 和 XML。通过js发出请求，后台服务器器响应，返回xml或者jason格式的数据到浏览器器端。局部刷新网页，具有更好的用户体验。

2.ajax应用

表单输入的数据校验，例如注册网站检验用户名是否已存在，邮箱号是否已注册。百度搜索的输入框搜索词联系。

3.具体使用方法

3.1主流浏览器通过：new XMLHttpRequest()对象发出请求，非主流浏览器（IE6,IE7,IE8）new ActiveXObject('MsXML2HTTP');

<script type="text/javascript">
var xhr =new  XMLHttpRequest();
conslose.log(xhr);
</script>

IE浏览器代码

<script type="text/javascript">
var axo=new ActiveXObject(Msxml2.XMLHTTP);
console.log(axo);
</script>

兼容各种浏览器器写法

<script type="text/javascript">

try{
  var xhr = new XMLHttpRequest();
}catch(e){
var xhr =new ActiveXObject();
}
console.log(xhr);

</script>

3.2 ajax和服务器交互的流程

1.建立和服务器之间的链接

扫描二维码关注公众号，回复： 1598658 查看本文章

2.发出请求

3.监视请求的进度

4.接收服务器返回的数据

<script type="text/javascript">

var xhr= new XMLHttpRequest();

//建立和服务器之间的链接（联想理解：浏览器输入url地址）
//参数1.http请求方式,GET还是POST
//参数2.请求的服务器url地址
//参数3.是否是异步请求，true为是，false是否

xhr.open('GET','xxx.php','true');

//发出请求（联想理解：浏览器点击enter键）
xhr.send();

//监视服务器的状态
// 0 请求未初始化，xhr.opn()之前
// 1 已经建立连接  xhr.open()之后
// 2 请求已发出    xhr.send()
//3 请求中
// 4 请求已完成

//只需检测ajax对象readystatus 的属性值等于4，表示请求已完成
xhr.onreadystatechange =function(){
if(xhr.readystate =4) {
 if(xhr.status = 200){
    //200和404两个状态码，200表示请求成功，404未找到
    console.log(xhr.responseText);
        }
    }
}


</script>

猜你喜欢