ajax出来之前前后端怎么交互,前后端交互---如何发起ajax

在低版本的IE7及以下的浏览器使用ActiveXObject构造Ajax对象时需要传入一个String类型的Microsoft.XMLHTTP。

//for IE7-

var xmlHttp1 = new ActiveXObject("Microsoft.XMLHTTP");

var xmlHttp2 = new ActiveXObject("Msxml2.XMLHTTP");

var xmlHttp3 = new ActiveXObject("Msxml3.XMLHTTP");

在标准的浏览器中使用XMLHttpRequest对象

//for IE8+ ，Firefox，chrome,Opera ,Safari

var xmlHttp = new XMLHttpRequest( );

为了兼容低版本的浏览器为此需要做一个判断

var XHR = function () {

var XMLHttp;

if ( window.XMLHttpRequest ) {

XMLHttp = new XMLHttpRequest();

}else{

XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

return XMLHttp;

}

var XMLObj = XHR();

console.log(XMLObj);

函数优化：我们可以用惰性函数来判断，在第二次执行的时候就能快速找到Ajax对象;

var XHR = function (){

var AJAXObj = [

function () { return new XMLHttpRequest() },

function () { return new ActiveXObject("Microsoft.XMLHTTP") },

function () { return new ActiveXObject( "Msxml2.XMLHTTP") },

function () { return new ActiveXObject("Msxml3.XMLHTTP") },

];

var val = null ;

for ( var i = 0; i < AJAXObj.length; i++ ) {

try {

val = AJAXObj[i]() ;

} catch (e) {

continue;

}

XHR = AJAXObj[i];

break;

};

if(!val){

throw new ReferenceError ("XMLHttpRequest is not supported");

}

return val;

}

var XMLObj = XHR( );

console.log(XMLObj);

接下来如何使用XMLHttpRequest或者ActiveXObject

XMLHttpRequest()是一个JavaScript对象，他可以取回url上的资源数据 ,而且XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML. 而且除了HTTP ,它还支持file 和 ftp 协议.

XMLHttpRequest让发送一个http的请求变的非常容易，只需简单的创建一个请求对象那个实例

var XHR = new XMLHttpRequest();

打开一个url，然后发送这个请求

,当传输完毕后，结构的http状态以及返回的相应内容也可以从请求对象中获取。

一,XMLHttpRequest对象方法概述:

// 返回值 方法(参数)

1, void abort();中止操作;

2,DOMString getAllResponseHeaders();得到所有响应头

3,DOMString getReponseHeader(DOMString header);得到指定的响应头

4, void open(DOMString method, DOMString url, optional async , optional DOMString ? user ,optional DOMString? +password);开启XMLHTTPRequest对象;

5, void send();发送请求;

7, void send(ArrayBuffer data);发送二进制流

8, void send(Blob data);发送二进制块

9, void send(Document data);发送文档

10, void send(DOMString? data);发送字符串

11, void send(FormData data);发送格式化表单数据

12, void setRequestHeader(DOMString header, DOMString value);//设置请求头

var XHR = new XMLHttpRequest();

XHR.getAllResponseHeaders();

var allheaders = XHR.getAllResponseHeaders();//返回所有的响应头信息,如果响应头不存在，则返回null

XHR.getAllResponseHeader();

var dateheader = XHR.getAllResponseHeader("date");//返回指定的响应头的值,如果响应头还没被接受,或该响应头不存在,则返回null.

XHR.open()

XHR.open(http Method, URL, isAsync, userName, password);

//http Method请求所使用的http方法“POST”，“GET”

//URL 该请求所要访问的URL

//isAsync 一个可选的布尔参数，默认为真，指示是否异步执行操作。如果该值为false时，send()方法不返回直到收到响应。如果为true，完成交易的通知使用事件侦听器提供。这必须是真实的，如果多部分属性为true，或将引发异常。

//userName 可选的用户名，以用于身份验证的目的;默认情况下，这是一个空字符串。

//password 可选的密码用于认证的目的;默认情况下，这是一个空字符串。

XHR.onload

XHR.onload = function ( ) {

console.log(this.responseText, this.responseType, this.response);

}

//当XMLHTTPRequest对象加载完成时(readyState为4)触发，且只与readyState有关，与status和statustext无关；

//所以当注册onload的方法执行时不一定为成功的状态。只是也仅仅是这个条http事务完成而已。不注册此方法则onload默认为null。

XHR.onreadystatechange

XHR.onreadystatechange = function () {

//判断ajax请求成功

if ( this.readyState == this.DONE && this.statusText == "OK" ){

console.log(this.response,"成功");

}

//或者

if(this.readyState == 4 this.status == 200 ) {

console.log(this.responseText,"成功");

}

}

//每当readyState的值改变时就会触发该方法，不注册此方法则onreadystatechange默认为null。

send();//注意: 所有的事件绑定必须在send()方法之前进行

XHR.send(undefined||null||ArrayBufferView||Blob||XML||String||FormData);

//发送请求: 如果请求是异步模式(默认)，该方法会立刻返回,相反，如果请求是同步模式，则直到请求的响应完全接受以后,该方法才会返回.

//GET请求没有主体，所以默认传递为null或者省略这个参数。POST请求通常拥有主体，同时它应该匹配setRequestHeader()指定的Content-Type头;

XHR.setRequestHeader("header","value");

//设置指定的请求头，此方法必须在send()执行之前执行;

//header 将要被赋值的请求头名称

//value 给指定的请求头赋值

二，XMLHttpRequest对象属性概述:

// 属性名 格式类型 说明

onreadystatechange Function 一个js函数对象,当readyState属性改变时会调用它，回调函数会在用户节后线程中调用.(警告: 不能在本地代码中使用. 也不应该在同步模式的请求中使用.)

readyState unsigned 0：UNSENT未打开open()方法还未调用, 1:opened(未发送)send方法还未被调用, 2： HEADERS_RECEIVED(响应头已经获取) send()方法已经被调用，响应头和响应状态已经返回, 3: _LOADING(正在下载响应体)响应体正在下载中,responseText中已经获取了部分数据 ; 4：DONE(请求完成)整个请求过程完毕;

response varies 响应实体的类型由 responseType 来指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")， 或者是字符串。如果请求未完成或失败，则该值为 null。

responseText DOMString 此次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。

responseType XMLHttpRequestResponseType设置该值能够改变响应类型。就是告诉服务器你期望的响应格式： "" (空字符串) 字符串(默认值)、 "ArrayBufferView" ArrayBufferView、 "blob" Blob、 "document" Document、 "json" JavaScript Object、 "text" 字符串。

responseXML Document? 本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为"document"，并且请求为异步的，则响应会被当做 text/html 流来解析。只读.(注意: 如果服务器不支持 text/xml Content-Type 头，你可以使用 overrideMimeType() 强制 XMLHttpRequest 将响应解析为 XML。)

status unsigned short 该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.

statusText DOMString 该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读.

upload XMLHttpRequestUpload 可以在 upload 上添加一个事件监听来跟踪上传过程。

withCredentials boolean 表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 false。注意: 这不会影响同站(same-site)请求.

HTTP请求的各部分的指定顺序

首先请求方法和URL首先到达，然后是请求头 ,最后是请求主体。XMLHttpRequest实现通常直到调用send()方法才开始启动网络。

setRequestHeader()方法的调用必须在调用send()之前但在open()之后，否则抛出异常.

var XHR = new XMLHttpRequest();

XHR.open("POST/GET",URL);

XHR.setRequestHeader("Content-Type","text/plain;charset=UTF-8");

XHR.onreadystatechange = function () {

if(XHR.readyState == 4 && XHR.status == 200){

console.log(XHR.responseText,XHR.response,XHR.responseType);

}

};

XHR.send();

//如果是open()为GET，那么send()里的参数为空或者null;

//如果是open()为POST,那么send()里有参数，还需要配合XHR.setRequestHeader()一起使用;

var XHR = new XMLHttpRequest();

XHR.open("GET","index.xml");

XHR.onreadystatechange = function () {

if (this.readyState == 4 && this.status == 200){

if ( this.responseXML != null && this.repsonseXML.getElementById("test".textContent) ) {

processData(this.responseXML.getElementById("test").textContent);

return;

}else{

processData(null);

}

}

};

XHR.send();

//一个处理请求过来的XML文档函数;

function processData(data){

}

//如果你只想一个记录消息服务器

function log (message) {

var XHR = new XMLHttpRequest();

XHR..open("POST","url");

XHR.setRequestHeader("Content-Type","text/plain;charset=UTF-8");

XHR.send(message);

}

//或者，如果你要检查服务器上的文档的状态

function fetchStatus (address) {

var XHR = new XMLHttpRequest();

XHR.onreadystatechange = function () {

if(this.readstate == this.DONE) {

return this.status;

}

}

XHR.open("HEAD",address);

XHR.send();

}