Ajax入门

H&M

一、什么是ajax

Ajax (Asynchronous JavaScript and XML) 是一种 Web 应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯,获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

二、Ajax应用场景

1.2Ajax的应用场景:

1.2.1 检查用户名是否已被注册:

很多站点的注册页面都具被自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器进行数据交换,查询用户输入的用户名是否存在数据库。

1.2.2 省市级联下拉框联动:

很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现不同市区的选择,这就是最常见的省市联动效果。

 1.2.3 内容自动补全:

不管时专注于搜索的百度,还是站点内商品搜索的淘宝,都有搜索的功能,在i搜索框输入查询关键字时,整个页面没有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。

百度的搜索补全功能:

淘宝的搜索补全功能:

1.3 同步方式与异步方式的区别:

  1. 同步方式发送请求:发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会一直处于等待过程中。image.png
  2. 异步方式发送请求:发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。image.png
async:true;   //异步
async:false;  //同步

1.4 Ajax的原理分析:

Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。

在这里插入图片描述image.png

三、Ajax的核心机制:

XMLHttpRequest是ajax的核心机制

主要属性和方法:

1.readyState属性

 状态:
0    未初始化
1    准备发送
2    已发送但还未收到响应
3    正在接受
4    接受完成

2.responseText属性

 服务器响应的文本内容   
 结合readyState属性来看:
 readyState = 4 时,responseText才包含完整的响应信息
 readyState = 3 时,responseText包含不完整的响应信息
 readyState < 3 时,responseText为空字符串

3.responseXML属性

 服务器响应的XML内容对应的DOM对象

4.status属性(服务器返回的http的状态码)及statusText属性(状态码的文本信息)

 status = 200    成功

 status = 404 未找到

 status = 500 服务器内部错误

5.onreadystatechange事件

 当readyState属性发生变化时触发此事件,用于触发回调函数    

 onreadystatechange 是一个事件句柄.

 它的值 (state\_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 到 4 进行变化。仅在状态为 4 时,我们才执行代码。


6.open()方法

 open(method,url,async,username,password)

 method:必须    提交方式GET/POST/PUT...规定必须大写

 url:请求的服务器的地址

 async:布尔值,表示是否采用异步方法,默认为true异步,false为同步

 username,password可不指定,它们分别提供http认证机制需要的用户名和密码。

7.send()方法

 send(content)     content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串

 调用open方法后,可以调用send()方法来向服务器发送请求,当open中的async为true时,send()方法调用后会立即返回

8.setRequestHeader()方法

 setRequestHeader(header,value)

 用来设置请求的指定头部信息,此方法需在open()方法以后调用,否则会得到异常,一般在Post方式中使用

9.getResponseHeader()方法

 当readyState > 2 时,该方法用来检索响应的头部信息,否则返回一个空字符串

 getAllResponseHeaders()方法就是返回所有的HttpResponse头部信息

10.abort()方法

 停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

四、Ajax使用的基本步骤:

1.创建XMLHttpRequest对象

  var xhr = null;
        if(window.XMLHttpRequest){   //如果window底下有这个属性,直接使用
            xhr = new XMLHttpRequest()    // 除IE5 IE6 以外的浏览器  XMLHttpRequest是window的子对象 
        }else{// IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
            xhr = new ActiveXObject("Microsoft.XMLHTTP")  //老版本的IE,ie6及以下
        }

2.绑定事件监听函数

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) {//表示消息接收完成和响应成功
      // console.log(xhr.responseText);
      // 通过responseText获取服务器返回的数
    var oDiv =document.createElement('div');//创建一个<div>元素
    varoDiv.innerHTML = xhr.responseText;//将获取到的服务器响应的文本内容写进oDiv里面
        document.body.appendChild(oDiv); //将oDiv再添加到body里面
    }else{//当消息接收没有完成或者响应不成功时
        alert("错误码为:"+xhr.status);
    }
}

3.建立连接

xhr.open("GET","02.json",true);
    //请求方式为get,请求的服务器地址为02.json,异步

4.发送消息请求

 xhr.send(发送的参数)
 xhr.send(null);
阅读 836

普通的开发者

19 声望
7 粉丝
0 条评论

普通的开发者

19 声望
7 粉丝
文章目录
宣传栏