学习
实践
活动
专区
工具
TVP
写文章

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

);

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180516G1U76I00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券