源生：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
var oAjax = new XMLHttpRequest();
oAjax.open('GET','a.txt',true);
oAjax.send();
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){
//请求完成
if(oAjax.status >= 200 && oAjax.status<300 || oAjax.status == 304){
alert(oAjax.responseText);
}
}
}
};
};
</script>
</head>
<body>
<input type="button" value="发个请求" id="btn1">
<div style="width: 200px;height: 200px;background: red"></div>
</body>
</html>
jquery
ajax:
$.ajax({
url:
dataType:
cache:
success:
error:
});
还有几个比较常用的参数：
async 是否异步（默认是true）
如果需要同步请求： false
contentType
请求内容的类型，一般用于post请求
data:
get:$.ajax({
url:'1.php?a=1&b=2'
});
post:$.ajax({
url:'1.php',
data:{
a:1,
b:2
}
})
type: 默认 GET
$.ajax({
url:'1.php?content='+oT.value ×
url:'1.php',
data:{
content:oT.value
}
type:'POST'
});
一个简单请求：
$.ajax({
url:'a.txt',
success:r=>{
alert(r);
}
});
请求的地址：
a.txt
—— 相对路径，必须从当前文件位置开始
http://localhost/20170220K3/0224/a.txt
—— 绝对路径，在任何位置都可以用这个地址来访问
请求一个别的网站地址：
url:
http://demo.zhinengshe.com/strive/data.php
错误：
1 XMLHttpRequest cannot load http://demo.zhinengshe.com/strive/data.php. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8080' that is not equal to the supplied origin. Origin 'http://localhost' is therefore not allowed access.
“Access-Control-Allow-Origin”—— 跨域
域： 域名
baidu.com sina.com.cn localhost
Ajax 请求，如果域名不一致，就会发生跨域现象，报错。
www.sina.com.cn
sports.sina.com.cn
news.sina.com.cn
leju.com
——不同的域名，这些域名这间如果想做ajax数据交互
跨域：
解决跨域取数据的解决
从一个域名来获取另外一个域名的数据
JSONP：
jsonp != json + padding
原理：
函数定义
函数调用
在自己的页面定义show函数：
function show(json){
//可以通过json的参数来访问 zhinengshe.com/test.js 里的数据了
}
——————以上，就实现了跨域请求数据
以前： ajax的接口
现在： 新的接口形式—— JSONP 接口
百度接口：http://suggestion.baidu.com/su?wd=js&cb=show
关键参数说明：
wd: 表示的是搜索的关键词
cb: 一般表示 callback(回调)
cb=show
cb：用于指定回调函数的名字 (默认情况，大多数JSONP接口都使用 callback——默认值)
cb=?:这里的问号 ? —— 就是回调函数的名字
JSONP的接口，是可以指定返回值的回调函数名字的。
实现百度效果：
script标签： 比较特殊的标签 —— 一次性标签
只加载一次，修改src属性并不能触发标签的重新加载
JSONP原理：
动态创建script标签，通过回调函数来获取其它域名下的数据。
原生JS实现JSONP，为了了解原理。
jquery的JSONP:
JSONP中最重要的 ： 接口中的 “cb=show”
cb: 默认 callback
$.ajax({
url:请求的地址
dataType: 'jsonp' //json
jsonp: 'cb'//在一个 jsonp 请求中重写回调函数的名字
jsonpCallback: //对应的以上例子中的 show
//默认情况下，jquery会产生一个随机的函数名
//如果说接口中已经确定了回调函数名，那么在使用的时候，就需要用 jsonpCallback参数来指定 回调函数的名字
success:function(r){
//r
}
});
AJAX的原生写法，原理：
1、创建一个XMLHttpRequest 对象： 用于发请求
var oAjax = new XMLHttpRequest();
IE6 不支持 XMLHttpRequest 对象
new ActiveXObject('Microsoft.XMLHTTP');
2、指定请求的方式，同时创建并且打开链接
oAjax.open('GET','',true);
参数：
请求方式： GET POST
请求地址：URL
是否异步：默认true， false-同步
3、发送
oAjax.send();
4、监控状态、根据状态码确定是否完成，确定是否成功，得到请求结果
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){
//请求完成
if(oAjax.status >= 200 && oAjax.status<300 || oAjax.status == 304){
alert(oAjax.responseText);
}
}
//oAjax.status —— http 状态码
oAjax.readyState 通信状态，只读的，不能修改(赋值)
0 UNSEND ajax对象已经准备完毕，但是还没有打开连接
1 OPENDED 已经打开连接(建立好连接)
2 HEADERS-RECEVICED 发送请求完毕，头部信息也接收完毕了
3 LOADING 下载内容(接收内容)
4 DONE 操作完毕
网友评论