ajax的请求方式

AJAX全称：Asynchronous Javascript And XML，是一种用于创建快速动态网页的技术。ajax并不是一种全新的技术，而是一种整合了JavaScript和XML等现有技术。

ajax运行原理：客户端页面发出请求，会将请求发送到浏览器内核的ajax引擎，ajax引擎会将请求提交到服务器，在提交的这段时间，客户可以进行任意操作，直到服务器把数据返回到客户端的ajax引擎，此时就会触发设置事件，从而执行自定义的JS代码。完成实现页面的某些功能。

ajax语法：

$.ajax({

url:请求路径，

type:请求方式，

data:请求数据，

datatype:预期服务器返回的数据类型

...，

success:function(result,testStatus){

请求成功后执行的函数

}，

error:function(result,errorMessage e){

请求失败后执行的函数

}

});

JS原生的ajax技术（传统ajax技术）：

1）创建ajax引擎

2）为ajax引擎对象bind监听

3）bind提交地址

4）发动请求

5）接收响应数据

如下：

function validatePhoneNum(){

//获取用户输入电话号码

var pNum = document.getElementById("phoneId").value;

//1.调用ajax，创建XMLHttpRequest

xmlHttpRequest = new XMLHttpRequest();

//2.指定回调函数(用来处理服务器返回的数据)

xmlHttpRequest.onreadystatechange = callBack;//callBack是回调函数

//3.准备发送请求

xmlHttpRequest.open("post","validatePhoneNumServlet",true);

//4.设置请求头

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

//5.发送请求

var data = "pNum="+pNum;

xmlHttpRequest.send(data);

}

function callBack()

{

if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)

{

var result = xmlHttpRequest.responseText;

if(result =="true")

{

$("#ajax_error_id").css("display","none");

$("#ajax_ok_id").css("display","inline");

}

else

{

$("#ajax_error_id").css("display","inline");

$("#ajax_ok_id").css("display","none");

}

}

}

//jQuery实现ajax

A：

function validatePhoneNum_jAjax()

{

var pNum = $("#phoneIdAjax").val();

$.ajax({

url:"validatePhoneNumServlet",

data:"pNum="+pNum,

type:"get",

dataType:"text",

success:function(result){

if(result == "false")

{

alert("此号码已被绑定，请更换....");

}

else

{

alert("号码可用，成功绑定....");

}

},

error:function(){

alert("AJAX请求失败!!!!");

}

});

}

B：

//get和post方式的ajax语法一致

function validatePhoneNum_post()

{

var pNum = $("#phoneIdPost").val();

$.post(

"validatePhoneNumServlet",

"pNum="+pNum,

function(result){

if(result == "false")

{

alert("此号码已被绑定，请更换....");

}

else

{

alert("号码可用，成功绑定....");

}

},

"text"

);

}

C：$(SELECTOR).load()，不但会发送请求，还会将返回数据放入指定的元素（所以省略了回调函数）。$(SELECTOR)值jQuery选择器指定的元素。

function validatePhoneNum_load()

{

var pNum = $("#phoneIdLoad").val();

$("#ajax__ok_error_id").load(

"validatePhoneNumLoadServlet",

"pNum="+pNum

);

}