13. Ajax技术

Posted 2020-11-24 莫莫酱

　　在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理后，返回一个html页面的客户端。而在Ajax应用中，页面中的用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置。

　　对于每个用户的行为，在传统的Web应用模式中，将生成一次HTML请求，而在Ajax应用开发模式中，将变成Ajax引擎的一次javascript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量。

　　Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。

XMLHTTPRequest对象

　　Ajax使用的技术中，最核心的技术是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需求，于1999年在IE5.0浏览器中率先推出。现在许多浏览器都对其提供支持，不过实现与IE略有不同。

　　通过XMLHttpRequest对象，Ajax可以只和服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器的负担，又加快了响应速度。

初始化XMLHTTPRequest对象

if(window.XMLHttpRequest){  //非IE浏览器
    http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){     //IE浏览器的常见两种IE版本
    try{
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){}
    }
}

 

常用方法

 

open()

 　　open()方法用于设置进行异步请求目标的URL、请求方法及其他参数信息。

open("method", "URL", "asyncFlag", "username", "password")
/*
method:用于指定请求的类型：GET或POST
URL：用于指定请求地址，可以使用绝对或相对地址，并且可以传递查询字符串
asyncFlag：可选参数，用于指定请求方式，异步请求为true，同步请求为false，默认情况下是true
username：可选参数，用于指定请求用户名，没有时可省略
password：可选参数，用于指定请求密码，没有时可省略
*/

 

send()

 　　send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接受到响应为止。

send(content)
//用于指定发送的数据，可以是DOM对象的实例，输入流或字符串。没有参数需要传递可以设置为null

 

setRequestHeader()

 　　setResquestHeader()方法用于为请求的HTTP头设置值，该方法必须在调用open（）方法后才能调用

setRequestHeader("header", "value")；
//header:用于指定HTTP头    value:设置值

abort()

 　　用于停止或放弃当前的异步请求

abort()

 

getResponseHeader()

　　用于以字符串的形式返回指定的HTTP头信息

getResponseHeader("headerLabel")

 

getAllResponseHeaders()

 　　用于以字符串形式返回完整的HTTP头信息

常用属性

 

onreadystatechange属性

 

readyState属性

 

responseText属性

 

responseXML属性

 

status属性

 

statusText属性

 

与服务器通信

 

发送请求

 

处理响应

 

解决中文乱码问题

 

Ajax重构