0 XMLHttpRequest创建完对象
1 初始化完成 open
2 发送请求 send
3 正在接收数据
4 接收完成
原生js
//创建XMLHttpRequest对象
function createXHR() {
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
//type,url,data,async,fnSuccess,fnError
// var data = {type:"get",url:"",data:null,async:true,success: ,error: };
function ajax(data) {
//1
var xhr = createXHR();
var type,async;
type = data.type == "post" ? "post" : "get";
async = data.async?true:false;
//2
xhr.open(type,data.url,async);
//如果是post，设置请求头
if (type == "post") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//3
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (typeof data.success == "function") {
//调用回调函数，传入服务器返回的结果
data.success(xhr.responseText);
}
}else{
if(typeof data.error == "function") {
data.error();
}
}
}
}
//4
xhr.send(data.data);
}
应用
<script src="js/ajax.js"></script>
<script>
window.onload = function () {
document.getElementById("btn").onclick = function () {
ajax({
type:"get",
url:"php/01-gettime.php",
async:true,
data:null,
success: function (data) {
alert(data);
},
error: function () {
alert("错误");
}
})
}
}
</script>
jQuery中封装的ajax
jQuery的ajax请求
$.ajax({
url: './tologin.php',
type: 'POST',
dataType: 'html',
data: {username: 'qqq',password:"123"},
success:function(data){
alert(data);
},error:function() {
alert(0);
}
})
jsonp
产生的缘由：
1，浏览器的同源策略
2，<script>的src不属于同源策略
3，通过<script>的src指向的文件返回服务端数据
jQuery方法
<script>
$(function(){
$.ajax({
type:"get",
cache:false,//不缓存
url:"http://v.juhe.cn/weather/index?format=2&cityname=%E9%82%AF%E9%83%B8&key=e982f3629ae77eb7345b7e42f29b62ae&dtype=jsonp",
dataType:"jsonp",
success: function (data) {
alert(data.reason);
},
error: function () {
alert("亲，错误");
}
});
})
自己写的小demo
<body>
<button id="btn">查询正在上映的电影</button>
<span id="msg"></span>
<ul id="content"></ul>
</body>
<script>
$(function () {
document.getElementById("btn").onclick = function () {
var msg = document.getElementById("msg");
msg.innerHTML = "正在拼命的加载...";
var cb=Math.random();
console.log(111);
$.ajax({
type:"get",
// https://api.douban.com/v2/movie/in_theaters?start=0&count=10&q=undefined&callback=my_json_cb_08407925261695444
url:"https://api.douban.com/v2/movie/in_theaters?start=0&count=10&q=undefined",
dataType:"jsonp",
jsonp:"callback", //将来会替换掉地址中的 callback
jsonpCallback:"cb", //生成一个全局的方法 handle
success: function (data) {
console.log(data.subjects);
var film=data.subjects;
msg.innerHTML = "";
// console.log(film[0].title);
for(var i=0;i<film.length;i++){
console.log(222);
li=document.createElement("li");
li.innerHTML=film[i].title;
document.getElementById("content").append(li);
}
},
error: function () {
alert("error");
}
});
};
});
</script>
