js ajax send,JS实现AJAX请求

AJAX：全称“Asynchronous JavaScript and XML”   (异步的JavaScript与XML)

AJAX请求的特点：

1，不刷新页面

2，服务器仅返回需要的数据

AJAX引擎：XMLHttpRequest

此对象是浏览器中的内置对象，在目前的所有浏览器中都支持此对象。

IE中获取此对象：

if(window.ActiveXObject){

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

}

非IE中获取此对象：

var xmlHttp=new XMLHttpRequest();

兼容模式：

var xmlHttp;//声明一个对象

function createXMLHttpRequest(){

if(window.ActiveXObject){//如果是IE，采用这种方式获取

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

}else{//非IE采用这种方式获取

xmlHttp=new XMLHttpRequest();

}

}

请求的格式：

xmlHttp.open(请求方式,请求地址,[是否为异步请求]);

xmlHttp.send();

Get请求：

xmlHttp.open("GET","ajax.do?name=tom",true);

xmlHttp.send();

注：

get请求的传值方式为请求地址后面跟  ?key=value

Post请求：

xmlHttp.open("POST","ajax.do",true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.send("name=tom");

注：

post请求的传值方式是在send()方法中进行传值，多个值用逗号隔开：name=tom,age=12

setRequestHeader的意思是设置请求头的类型为表单类型：Content-Type="application/x-www-form-             urlencoded"  是form表单的默认属性

一个完整的AJAX请求的流程：

1，创建XMLHttpRequest对象

2，调用xmlHttp.open()设置请求内容

3，设置回调函数(根据服务器返回的状态信息，做什么事情)

4，调用xmlHttp.send()发送请求

function sendAjax(){

createXMLHttpRequest();//调用上面设置的兼容模式

xmlHttp.open("GET","ajax.do?name=tom",true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数

xmlHttp.send();

}

//回调函数

function callback(){

alert("callback");

}

sendAjax();//浏览器会弹出几次框(不同的浏览器可能不同)

获取AJAX请求的状态码和HTTP协议的状态码：

AJAX请求的状态码有四个值：

var xmlState=xmlHttp.readyState;

1，已初始化

2，数据传输中

3，响应数据传输中

4，响应完毕

HTTP协议的状态码有很多：

var httpState=xmlHttp.status;

常见的状态码如下：

状态码

意义

200

服务器正确处理了请求并响应

404

请求的页面未找到

403

没有权限访问请求的页面

405

页面不接收该请求方式

408

请求超时

500

服务器处理请求时发生异常

503

服务暂时不可用

304

网页未修改

使用Servlet获取服务器端的文本：

//ajax.do

//这是Servlet类中的doGet方法

public void doGet(HttpServletRequest request,HttpServletResponse response){

PrintWriter out=response.getWriter();

out.print("OK");

out.flush();

out.close();

}

//callback

function callback(){

if(xmlHttp.readyState==4){//响应完毕后

if(xmlHttp.status==200){//http状态码为200时

var result=xmlHttp.responseText;//获取ajax请求的文本内容

alert(result);

}

}

}

总结：

Ajax请求使用 XMLHttpRequest 对象

IE和非IE获取对象的方式不同

GET，POST请求的传值问题

Ajax请求的流程

Ajax请求的状态码和HTTP协议中服务器返回的状态码

获取简单地服务器返回的文本信息

结语：(hunthon:入门级程序员)

AJAX请求用来处理网页请求是非常棒的技术，本篇博客旨在介绍Ajax的最简单的用法，后续的文章会对Ajax做较详细的描述，文章中如果出现错误请及时向我反馈，希望与大家一起进步。