深入浅出解析AJAX
Posted 素心~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入浅出解析AJAX相关的知识，希望对你有一定的参考价值。
AJAX完全依赖于XMLHttpRequest对象
GET请求
// 创建xhr对象 var xhr = new XMLHttpRequest(); // 监听xhr对象 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { console.log(xhr.responseText); } } } xhr.open("get", URL) xhr.send(null)
这里监听要写在send之前，先监听后向服务器发起请求，相反如果请求发出在监听则本末倒置，即便在开发上并无区别。
xhr对象一旦开始open，就有了readyState属性，readyState属性一旦发生改变，就能够触发onreadystatechange事件，所以要先监听，这也是所有轮子的标准模板。
在open时http请求并没有发出，直到send后才会发出。
readyState 状态
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
我们只会关心就绪状态为4时
浏览器执行到Ajax代码，发出了一个HTTP请求，欲请求服务器上的数据服务器的此时开始I/O，所谓的I/O就是磁盘读取，需要花一些时间，所以不会立即产生下行HTTP报文。
由于Ajax是异步的，所以本地的javascript程序不会停止运行，页面不会假死，不会傻等下行HTTP报文的出现。后面的JavaScript语句将继续运行。进程不阻塞。
服务器I/O结束，将下行HTTP报文发送到本地。
如果时post请求必须手动设置请求头，模拟form表单提交
xhr.open("post", URL)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + encodeURIComponent("夏彬"))
这里尽量将中文转译，防止服务器错乱，后台程序语言，都能够自动处理转译。
每个XMLHttpRequest对象只能监听一条HTTP请求，直到这条请求结束，才能发起下一条，强行发起上一条请求会被注销。
因为同源策略所以XMLHttpRequest对象是不能跨域的，我们可以使用JSONP来跨域，JSON+Padding，用一种逆思维来跨域
fun({ "result" : [ { "name" : "小明", "age" : 12, "sex" : "男" }, { "name" : "小红", "age" : 13, "sex" : "女" }, { "name" : "小绿", "age" : 16, "sex" : "女" } ] });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function fun(data) { console.log(data) } </script> <script src="jsonp.txt"></script> </body> </html>
我们可以将JSONP封装为轮子以达到正向编程的目的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
jsonp(‘jsonp.txt‘, "name=xiabin", "fun", function(data) {
console.log(data)
})
function jsonp(URL, queryString, callbackName, callback) {
// 将JSONP定义函数绑定到window上
window[callbackName] = callback;
var dom = document.createElement(‘script‘);
dom.src = queryString ? URL + "?m=" + Math.random() + "&" + queryString : URL + "?m=" + Math.random();
document.body.appendChild(dom)
document.body.removeChild(dom);
}
</script>
</body>
</html>
当然如果一些数据不同源，且返回的不是JSONP数据，那么我们仍然可以使用服务器语言进行偷数据，现在很多网站都防偷。。。
例如：php中
<?php header("Content-Type:text/json;charset=gb2312"); $phone = $_GET["phone"]; $a = file_get_contents("http://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=".$phone); print_r($a); ?>
以上是关于深入浅出解析AJAX的主要内容，如果未能解决你的问题，请参考以下文章