为了账号安全,请及时绑定邮箱和手机立即绑定

XMLHttpRequest对象 /《Ajax全接触》课程总结

标签:
JavaScript

XMLHttpRequest 对象

var xhr;
if(window.XMLHttpRequest){
    // IE7+、FireFox、Chrome ...
    xhr = new XMLHttpRequest();
} else {
    // IE5、IE6
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

XHR英文全名XMLHttpRequest,中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言,Http超文本传输协议,Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

    * 只支持文本数据的传送,无法用来读取和上传二进制文件。
    * 传送和接收数据时,没有进度信息,只能提示有没有完成。
    * 受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请求数据。

一、Http请求、响应过程7步:
1、建立TCP连接
2、Web浏览器向服务器发送请求命令
3、Web浏览器发送请求头信息
4、服务器应答
5、服务器回传应答头信息
6、服务器向浏览器发送数据
7、关闭TCP连接
二、Http请求(Request 四部分组成)
1、Http请求的方法或动作,如GET、POST

1.1 GET:
一般用于信息的获取/查询,不修改数据本身;
使用URL传递参数;
对所发送的信息数量有限制,一般在2000个字符。
1.2 POST:
一般用于修改服务器上的资源;
对所发送信息数量无限制。

2、请求的URL地址
3、请求头,包含客户端系统环境信息、身份验证信息等
4、请求体,即请求正文。可包含客户提交的查询字符串、表单信息等
三、Http响应(Response 三部分组成)
1、状态码,由3位数字和文字构成,用来说明请求是成功还是失败。状态码说明:

1XX:信息类,表示收到浏览器请求,正在进一步处理中
2XX:已成功,用户请求被正确接收、理解和处理,如200 OK
3XX:重定向,请求失败,客户必须采取进一步的动作
4XX:客户端错误,客户端提交的请求有错误,如404页面/资源不存在
5XX:服务器错误,不能完成对请求的处理,如500

2、响应体,与请求头类似,包含许多有用信息,如服务器类型、日期时间、内容类型及长度等等
3、响应体,即响应正文
四、XMLHttpRequest对象方法

// **请求Request部分**
xhr.open('POST', 'receive-page.php', true);
// open(method, url, async)
// method: 请求方法,GET、POST等
// url: 请求地址,绝对地址或相对地址
// async: 是否为异步请求,默认为true
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 请求头部发送内容格式
// Content-type介绍:http://www.runoob.com/http/http-content-type.html
xhr.send();
// **响应Response部分**
xhr.onreadystatechange = function(){
    // onreadystatechange监听readyState属性b
    if(xhr.readyState===4){
        // readyState属性值
        // 0:请求未初始化,open方法还没有调用
        // 1:服务器连接已建立,opne方法已调用
        // 2:请求已接收,即服务器已接收到请求头信息
        // 3:请求处理中
        // 4:请求处理已完成,服务器响应结束
        if(xhr.status===200){
            // 状态码 200 ok
            // status和statusText
            console.log(xhr.responseText);
            document.getElementById('id').innerHTML = xhr.responseText;
            // responseText:获得字符串形式的响应数据
            // responseXML:获得XML形式的响应数据
        } else {
            alert('Error: '+ xhr.status);
        }
    }
}

其他参数说明
1、getAllResponseHeader() 获取所有响应头信息
2、getResponseHeader() 查询响应中的某个字段的值
五、jQuery中的Ajax
1、jQuery.ajax([setting])
type 类型,POST或GET
url 发送请求的地址
data 是一个对象,发送到服务器的数据
dataType 预期服务器返回的数据类型。若未指定,jQuery将根据HTTP包MIME信息自动判断。目前流行json格式。
success: function(data){ ... } 请求成功的回调函数
error 请求失败的回调函数,传入XMLHttpRequest对象
2、jQuery Ajax

jQuery.ajax({
    type: 'post',
    url: 'receive-page.php',
    data: {},
    success: function(data){
        console.log(data);
        $('#id').text(data);
    },
    error: function(){
        // ...
    }
});

六、处理跨域的方式
http:// www . abc.com : 8080 / receive-page.php
(协议) (子域名) (主域名) (端口号) (请求资源地址)
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间资源请求就叫做“跨域”
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,js的同源策略限制。
1、服务器后台代理
通过在同域名的Web服务器端创建一个代理
2、JSONP
可用于解决主流浏览器的跨域数据访问的问题

// a.com 页面中 jsonp.js
function jsonp(json){
    alert(json['name']);
}
// b.com 页面中引入jsonp.js文件
// <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.a.com/jsonp.js"></script>
jsonp({"name": "洪七", "age": "32"});

该方法只支持get请求
3、XHR2
H5提供的XMLHttpRequest Level 2可以实现跨域访问及其它的一些新功能;

// 相比老版本的XMLHttpRequest对象:
    * 可以设置 HTTP 请求的时限。
    * 可以使用 FormData 对象管理表单数据。
    * 可以上传文件。
    * 可以请求不同域名下的数据(跨域请求)。
    * 可以获取服务器端的二进制数据。
    * 可以获得数据传输的进度信息。

IE10以下版本的浏览器都不支持此方法
在服务器端的配置:

header("Access-Control-Allow-Origin:*"); // * 代表任意域名
header("Access-Control-Allow-Methods: POST, GET");

扩展阅读 "XMLHttpRequest Level 2 使用指南":http://kb.cnblogs.com/page/157047/

点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消