Ajax的基本使用

Posted 2021-04-15 程序餐厅

Asynchronous javascript and xml

Ajax的实现 : 基于一个对象XMLHttpRequest (如何获取?)

步骤: 1. 获取ajax对象

    function getRequestObject() {

if (window.XMLHttpRequest) {

// 支持Opera, Safari, Mozilla, Chrome,Internet Explorer 7, and IE 8.

return(new XMLHttpRequest());

} else if (window.ActiveXObject) {

//支持IE5.5或IE6

return(new ActiveXObject("Microsoft.XMLHTTP"));

} else {

//其他低版本或者更老的浏览器不支持

return(null);

}

}

2. 发送请求

function sendRequest() {

var request = getRequestObject();

//   请求方式/请求的资源/是否异步

request.open("GET", "message-data.html", true);

//get请求send的参数为null,为啥?

request.send(null);

//服务器响应请求以后执行的代码

request.onreadystatechange = function() {

handleResponse(request)

};

}

Post请求如何发送?

request.open("POST", url, true);

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   //发送HTTP请求头

request.send(data);  //例如传入”a=6&b=8”,后台可用request.getparameter(“a”)获取

3. 响应处理

function handleResponse(request) {

// 4表示服务器成功完成响应(总共5种状态:0,1,2,3,4)

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

alert(request.responseText);  //responseXML

}

 }

 

JQ中的ajax函数应用

$.ajax({

     // 请求路径, string类型 , 默认为当前页面

url :  "address",

// 请求方式（post或get）默认为get, 注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持

      type : ”GET”,

   //发送到服务器的数据, 要求为Object或String类型的参数。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

data :  { param1 : "Java", param2 : "php“ },

    //要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：   xml：返回XML文档，可用JQuery处理。   html：返回纯文本HTML信息。   script：返回纯文本JavaScript代码。   json：返回JSON数据。   jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。   text：返回纯文本字符串。

dataType : "json",

   //要求为Function类型的参数，请求成功后调用的回调函数         (1)由服务器返回，并根据dataType参数进行处理后的数据。         (2)描述状态的字符串。         function(data){            //data可能是xmlDoc、jsonObj、html、text等等         }

success : successHandlerFunction,

error : errorHandlerFunction, 

//要求为Boolean类型的参数，默认为true，设置为false将不会从浏览器缓存中加载请求信息。

cache : false,

})

 

$.getJSON( “doFindPageObjects.do”, {pageCurrent:1} , function(result) {

//处理返回结果

})

 

$.post("doFindPageObjects.do", {pageCurrent:1} , function(result) {

      //处理返回结果

})

 

ajax的优点：

1、最大的优点就是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

5、ajax可使因特网应用程序更小、更快，更友好。

ajax的缺点：

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。