前端之Ajax

最新推荐文章于 2024-03-21 00:10:19 发布

YiShan0520

最新推荐文章于 2024-03-21 00:10:19 发布

阅读量133

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45744846/article/details/103689673

版权

主要内容:

1. XMLHttpRequest 对象

2. GET 和 POST

3. 封装 Ajax

概念:

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)，这是由微软首先引入的一个特性，其

他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，Ajax 式的通信必须借助一些手段

来实现，大多数是使用隐藏的框架或内嵌框架。

XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步

方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，

更新服务器最新的数据。

XMLHttpRequest 对象

IE7+、Firefox、Opera、Chrome 都支持原生的 XHR 对象，在这些浏览器中创建 XHR 对

象可以直接实例化 XMLHttpRequest 即可。

var xhr = new XMLHttpRequest();

alert(xhr); //XMLHttpRequest

了解：较老的 IE 版本创建 Microsoft.XMLHTTP 对象:

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

在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的 请求类型(get、

post) 、 请求的 UR L 和 表示是否异步 。open()方法并不会真正发送请求，而只是启动一个请求

以备发送。

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如

果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共

有四个属性：

属性名说明 responseText 作为响应主体被返回的文本

responseXML

如果响应主体内容类型是 "text/xml" 或

"application/xml"，则返回包含响应数据的 XML DOM 文

档

status 响应的 HTTP 状态

statusText HTTP 状态的说明

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般情况 HTTP 状态

代码为 200 作为成功的标志。除了成功的状态代码，还有一些别的：

HTTP 状态码状态字符串说明

200 OK 服务器成功返回了页面

400 Bad Request 语法错误导致服务器不识别

401 Unauthorized 请求需要用户认证

404 Not found 指定的 URL 在服务器上找不到

500 Internal Server Error 服务器遇到意外错误，无法完成请求

503 ServiceUnavailable 服务器过载或维护导致无法完成请求

我们判断 HTTP 状态值即可，不建议使用 HTTP 状态说明，因为在跨浏览器的时候，可能

会不太一致。

function ajaxFunction () {

// 创建 XMLHttpRequest 对象

var xhr ;

try {

xhr = new XMLHttpRequest();

} catch (e) {

try {

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

} catch (e) {

alert(" 你的浏览器不支持 ajax 技术 ");

}

// 提出 get 请求

xhr.open('get','js/cuisine_area.json',false);

// 提出请求 post 请求

/*xhr.open('post','js/cuisine_area.json',false);

xhr.setRequestHeader('Content-Type',

'application/x-www-form-urlencoded');*/

// 发送请求

xhr.send(null); //alert(" 在等待 ...."); // 处理服务器返回的内容 if(xhr.status == 200) { alert(xhr.responseText); }else { alert(" 请求失败！状态码为： " + xhr.status + " ，状态信息： " + xhr.statusText); } //alert(" 请求完成 "); } 说明： post 请求，需要有服务器，暂时使用 tomcat 将 tomcat 压缩包在某个盘下解压将存放了 json 文件的项目放入 webapps 文件夹下在 bin 目录下，打开 startup.bat，启动服务同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发 readystatechange 事件。这个属性有五个值：值状态说明 0 未初始化尚未调用 open()方法 1 启动已经调用 open()方法，但尚未调用 send()方法 2 发送已经调用 send()方法，但尚未接受响应 3 接受已经接受到部分响应数据 4 完成已经接受到全部响应数据，而且可以使用 function ajaxFunction () { // 创建 XMLHttpRequest 对象 var xhr ; try { xhr = new XMLHttpRequest(); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert(" 你的浏览器不支持 ajax 技术 "); } } alert(" 在等待 ...."); /* * 使用异步调用的时候，检测 readyState 属性 , 每当 readyState 属性改变时，触发 readystatechange 事件。 * */ // 处理服务器返回的内容 xhr.onreadystatechange = function () { if(xhr.readyState == 4) { if(xhr.status == 200) { alert(xhr.responseText); }else { alert(" 请求失败，状态码为： " + xhr.status + " ，状态信息： " + xhr.statusText); } } } // 提出 get 请求 xhr.open('get','js/cuisine_area.json',true); // 提出 post 请求 /*xhr.open('post','js/cuisine_area.json',true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');*/ // 发送请求 xhr.send(null); alert(" 请求完成 "); }