深入浅出解析AJAX
2021-04-11 03:27
YPE html>
标签：view 结束 initial file 建立 urlencode data result char
AJAX完全依赖于XMLHttpRequest对象
GET请求
// 创建xhr对象 var xhr = new XMLHttpRequest(); // 监听xhr对象 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status ) { 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" : "女" } ] });
Document
我们可以将JSONP封装为轮子以达到正向编程的目的
Document
当然如果一些数据不同源，且返回的不是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
标签：view 结束 initial file 建立 urlencode data result char
原文地址：https://www.cnblogs.com/tengx/p/12419461.html
上一篇：HTTP各版本的区别
下一篇：HTML-span和div区别