Ajax

Posted 2020-10-14 涳想傢

【前言】

　　Ajax作为现行的实现网页异步交互的主要技术，是前端知识体系中重要的一环，本文介绍了使用Ajax的基本内容。

【基本内容】

　　【同步交互和异步交互】

　　　　【同步交互】

　　　　-　　客户端向服务器端发送请求，到服务器端进行相应，整个过程中用户不能进行其他操作。

　　　　【异步交互】

　　　　-　　客户端向服务器端发送请求，直到服务器端进行响应，用户能够进行其他操作

　　【Ajax】

　　　　-　　Asynchronous javascript and Xml

　　　　-　　Ajax实现B/S架构下的异步交互

　　【同步和异步的区别】

　　　　同步：执行速度慢，响应的是完整的html页面

　　　　异步：执行速度相对比较快，响应的是部分数据

　　

【Ajax的核心对象】

　　-　　XMLHttpRequest对象

　　【创建XMLHttpRequest对象】

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(‘Microsoft.XMLhttp‘);
    }
　　return xhr;
}    

　　【XMLHttpRequest对象的属性和方法】

　　　　【属性】

　　　　-　　readyState：当前请求状态

　　　　　　*　　0：尚未初始化

　　　　　　*　　1：正在发送请求

　　　　　　*　　2：请求发送完成

　　　　　　*　　3：请求成功，正在响应

　　　　　　*　　4：响应完毕

　　　　-　　status：服务器返回的HTTP请求响应值

　　　　　　*　　200 请求成功

　　　　　　*　　202 请求被接受但是处理未完成

　　　　　　*　　400 错误的请求

　　　　　　*　　404 资源未找到

　　　　　　*　　500 内部服务器错误，如asp代码错误等

　　　　【方法】

　　　　-　　open(method,url,async) 

　　　　　　*　　method：设置当前请求的类型

　　　　　　*　　url：设置当前请求的地址

　　　　　　*　　async：设置是否异步（不建议使用）

　　　　-　　send(请求参数)

　　　　　　*　　请求参数的格式：key=value;

　　　　【事件】

　　　　-　　onreadystatechange事件

【实现Ajax异步交互的步骤】

　　【1】创建XMLHttpRequest对象

　　【2】与服务器建立连接

　　-　　使用XMLHttpRequest对象的open(method,url)方法

　　【3】向服务发送请求

　　-　　使用XMLHttpRequest对象的send(请求参数)方法

　　【4】接收服务器端的响应数据

　　-　　使用XMLHttpRequest对象的onreadystatechange事件，监听服务器端的通信状态

　　-　　使用XMLHttpRequest对象的readyState属性，判断服务器端的当前状态

　　-　　使用XMLHttpRequest对象的status属性，判断服务器端的状态码

　　-　　使用XMLHttpRequest对象的responseText属性，接收服务器端的响应数据

【GET和POST方式的区别】

　　【GET请求类型】

　　-　　send()方法不起作用，但是不能被省略

　　　　xhr.send(null);

　　-　　请求参数添加到url?key=value

　　【POST请求方式】

　　-　　send()方法起作用

　　　　在sen()方法被调用之前，使用setRequestHeader()方法设置请求头信息

　　　　xhr.setRequestHeader("Conten-Type","application/x-www-form-urlencoded");