由于 html 标签的 iframe 标签具有局部加载内容的特性, 所以可以使用其来伪造 Ajax 请求.
- ="en">
- ="UTF-8">
- /title>
请输入要加载的地址:
id="currentTime">
加载页面位置:</h3>
- id="iframePosition" style="width: 100%;height: 500px;">
- type="text/javascript">
- window.onload= function(){
- var myDate = new Date();
- document.getElementById('currentTime').innerText = myDate.getTime();
- };
- function LoadPage(){
- var targetUrl = document.getElementById('url').value;
- document.getElementById("iframePosition").src = targetUrl;
- }
原生 AJAX
Ajax 主要就是使用 [XmlHttpRequest] 对象来完成请求的操作, 该对象在主流浏览器中均存在 (除早起的 IE),Ajax 首次出现 IE5.5 中存在 (ActiveX 控件).
1,XmlHttpRequest 对象介绍
XmlHttpRequest 对象的主要方法:
a. void open(String method,String url,Boolen async)
用于创建请求
参数:
method: 请求方式 (字符串类型), 如: POST,GET,DELETE...
url: 要请求的地址 (字符串类型)
async: 是否异步 (布尔类型)
b. void send(String body)
用于发送请求
参数:
body: 要发送的数据 (字符串类型)
c. void setRequestHeader(String header,String value)
用于设置请求头
参数:
header: 请求头的 key(字符串类型)
vlaue: 请求头的 value(字符串类型)
d. String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据 (字符串类型)
e. String getResponseHeader(String header)
获取响应头中指定 header 的值
参数:
header: 响应头的 key(字符串类型)
返回值:
响应头中指定的 header 对应的值
f. void abort()
终止请求
XmlHttpRequest 对象的主要属性:
a. Number readyState
状态值 (整数)
详细:
0 - 未初始化, 尚未调用 open() 方法;
1 - 启动, 调用了 open() 方法, 未调用 send() 方法;
2 - 发送, 已经调用了 send() 方法, 未接收到响应;
3 - 接收, 已经接收到部分响应数据;
4 - 完成, 已经接收到全部响应数据;
b. Function onreadystatechange
当 readyState 的值改变时自动触发执行其对应的函数 (回调函数)
c. String responseText
服务器返回的数据 (字符串类型)
d. XmlDocument responseXML
服务器返回的数据 (Xml 对象)
e. Number states
状态码 (整数), 如: 200,404...
f. String statesText
状态文本 (字符串), 如: OK,NotFound...
2, 跨浏览器支持
XmlHttpRequest
IE7+, Firefox, Chrome, Opera, etc.
- ActiveXObject("Microsoft.XMLHTTP")
- IE6, IE5
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <h1>XMLHttpRequest - Ajax 请求 </h1>
- <input type="button" onclick="XmlGetRequest();" value="Get 发送请求" />
- <input type="button" onclick="XmlPostRequest();" value="Post 发送请求" />
- <script src="/statics/jquery-1.12.4.js"></script>
- <script type="text/javascript">
- function GetXHR(){
- var xhr = null;
- if(XMLHttpRequest){
- xhr = new XMLHttpRequest();
- }else{
- xhr = new ActiveXObject("Microsoft.XMLHTTP");
- }
- return xhr;
- }
- function XhrPostRequest(){
- var xhr = GetXHR();
- // 定义回调函数
- xhr.onreadystatechange = function(){
- if(xhr.readyState == 4){
- // 已经接收到全部响应数据, 执行以下操作
- var data = xhr.responseText;
- console.log(data);
- }
- };
- // 指定连接方式和地址 ---- 文件方式
- xhr.open('POST', "/test/", true);
- // 设置请求头
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
- // 发送请求
- xhr.send('n1=1;n2=2;');
- }
- function XhrGetRequest(){
- var xhr = GetXHR();
- // 定义回调函数
- xhr.onreadystatechange = function(){
- if(xhr.readyState == 4){
- // 已经接收到全部响应数据, 执行以下操作
- var data = xhr.responseText;
- console.log(data);
- }
- };
- // 指定连接方式和地址 ---- 文件方式
- xhr.open('get', "/test/", true);
- // 发送请求
- xhr.send();
- }
- </script>
- </body>
- </html>
基于原生 AJAX - Demo
- View Code
- jQuery Ajax
jQuery 其实就是一个 JavaScript 的类库, 其将复杂的功能做了上层封装, 使得开发者可以在其基础上写更少的代码实现更多的功能.
jQuery 不是生产者, 而是大自然搬运工.
jQuery Ajax 本质 XMLHttpRequest 或 ActiveXObject
注: 2.+ 版本不再支持 IE9 以下的浏览器
伪 AJAX
来源: http://www.bubuko.com/infodetail-2668594.html