首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生态AJAX请求

首先Copy一段解释:什么是AJAX?

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,还有TEXT和JSON)。AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

客户端与服务器之间的交互大多分为同步交互和异步交互两种类型,而ajax通常使用的异步交互。

2.AJAX的优缺点:

优点:ajax是使用javascript向服务器发送异步请求,这个时候是页面的局部刷新而不是整个页面的刷新,因此Ajax的性能高。

缺点:虽然ajax发送的异步请求增加了用户的体验,但是这无形之中增加了服务器接收的请求数量,给服务器增加了访问压力。同时ajax底层使用的javascript实现的,这就导致了该技术的使用需要处理浏览器的兼容问题。

3.客户端(JSP页面中的核心代码)发送AJAX请求的四步走:

第一步:创建XMLHttpRequest对象,因为所有的异步交互都需要使用XMLHttpRequest对象,在创建的对象时需要解决浏览器兼容问题,代码如下:

functioncreateXMLHttpRequest() {

varxmlHttp;

//适用于大多数浏览器,以及IE7和IE更高版本

try{

xmlHttp =newXMLHttpRequest();

}catch(e) {

//适用于IE6

try{

xmlHttp =newActiveXObject("Msxml2.XMLHTTP");

}catch(e) {

//适用于IE5.5,以及IE更早版本

try{

xmlHttp =newActiveXObject("Microsoft.XMLHTTP");

}catch(e){}

}

}

returnxmlHttp;

}

第二步:打开与服务器的连接,使用open()方法;其中需要传递参数。

open(method, url, asyn);

其中method为GET字符串,填入“GET”,为POST则填入“POST”

url为请求的服务器的请求路径地址

asyn表示该连接是否是异步的,默认值为true为异步请求,false为同步请求

var xmlhttp = createXMLHttpRequest();

xmlhttp.open("GET", url, true);

第三步:使用open方法打开连接之后,我们就需要使用XMLHttpRequest对象中的send()方法来发送请求,其中send()方法中的参数为POST请求方式中的参数;如果是GET请求方式的话参数是链接在请求URL后面的,在send()方法中设置为null;

如果是POST请求:

POST请求必须设置ContentType请求头的值为application/x-www.form-encoded。表单的enctype默认值就是为application/x-www.form-encoded!因为默认值就是这个,所以大家可能会忽略这个值!当设置了的enctype="application/x-www.form-encoded”时,等同与设置了Cotnent-Type请求头。

但在使用AJAX发送请求时,就没有默认值了,这需要我们自己来设置请求头:

xmlhttp.send("parameter1=a¶meter2=b");//这里设置参数

如果是GET请求:

xmlhttp.send(null); //一定不能丢了这个null,不然不能发送请求!

最后一步:接收服务器的响应数据,XMLHttpRequest对象有一个onreadystatechange事件,它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态:

l:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;

l1:请求已开始,open()方法已调用,但还没调用send()方法;

l2:请求发送完成状态,send()方法已调用;

l3:开始读取服务器响应;

l4:读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。

下面代码会被执行四次!对应XMLHttpRequest的四种状态!

但通常我们只关心最后一种状态,即读取服务器响应结束时,客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

其实我们还要关心服务器响应的状态码是否为200,其服务器响应为404,或500,那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后,我们还需要获取到服务器响应的内容,可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

以下粘贴出 封装好的一段用来发送ajax请求js代码,使用的时候直接COPY调用即可。

// 创建request对象

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();//大多数浏览器

} catch (e) {

try {

return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

} catch (e) {

try {

return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

} catch (e) {

alert("哥们儿,您用的是什么浏览器啊?");

throw e;

* option对象有如下属性

*/

/*请求方式 method, */

/*请求的url url, */

/*是否异步 asyn, */

/*请求体 params, */

/*回调方法 callback,*/

/*服务器响应数据转换成什么类型 type */

function ajax(option) {

/*

* 1. 得到xmlHttp

*/

var xmlHttp = createXMLHttpRequest();

/*

* 2. 打开连接

*/

if(!option.method) {//默认为GET请求

option.method = "GET";

}

if(option.asyn == undefined) {//默认为异步处理

option.asyn = true;

}

xmlHttp.open(option.method, option.url, option.asyn);

/*

* 3. 判断是否为POST

*/

if("POST" == option.method) {

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

}

/*

* 4. 发送请求

*/

xmlHttp.send(option.params);

/*

* 5. 注册监听

*/

xmlHttp.onreadystatechange = function() {

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

//双重判断

var data;

// 获取服务器的响应数据,进行转换!

if(!option.type) {//如果type没有赋值,那么默认为文本

data = xmlHttp.responseText;

} else if(option.type == "xml") {

data = xmlHttp.responseXML;

} else if(option.type == "text") {

data = xmlHttp.responseText;

} else if(option.type == "json") {

var text = xmlHttp.responseText;

data = eval("(" + text + ")");

}

// 调用回调方法

option.callback(data);

}

};

};

使用的时候直接在js脚本中编写

ajax({

method:你的请求方式,

url:你的请求地址,

asyn:是否异步,

params:你要传递的参数,

type:返回处理的数据类型,

callback:function(data){

//这里进行处理使用响应的data数据

}

});

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

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券