ajax笔记
一. 简介 ajax是什么
ajax 异步的js和xml，通过ajax可以向浏览器发送异步请求，无刷新获取数据
xml是什么
xml可扩展标记语言，被设计用来传输和存储数据
xml和html类似，不同的是html中都是预定义标签，而xml中没有预定义标签，
全都是自定义标签，用来表示一些数据
<student>
<name>小飞</name>
<age>20</age>
<gender>男</gender>
</student>
现在已经被json取代了
用json表示：
{"name":"小飞"，“age”:20,"gender":"男"}
1.1 ajax的特点：
优点：
- 可以无需刷新页面与服务器进行通讯
- 允许你根据用户事件来更新部分页面内容
缺点
- 没有浏览历史
- 存在跨域问题
- seo不友好
http协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则
1.2GET请求和POST请求
相同点：
都是将数据提交到远程服务器
不同点：
-
提交数据存储的位置不同
get请求会把数据放到url后面，post请求会把数据放到请求头中
-
提交数据大小限制不同
GET请求对数据有大小限制
POST请求对数据没有大小限制
GET/POST应用场景
GET请求用于提交非敏感数据和小数据
POST请求用于提交敏感数据和大数据
二. ajax的五个步骤
1 创建一个异步对象
2 设置请求方式和请求地址
3 发送请求
4 监听状态变化
5 处理返回的结果
实例
var btn = document.querySelector("button");
btn.addEventListener("click",function(){
//1 创建一个异步对象
var xmlhttp = new XMLHttpRequest();
//2 设置请求方式和请求地址
/*method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）*/
xmlhttp.open("GET","ajax-get.php",true);
//3 发送请求
xmlhttp.send();
//4 监听状态变化
//只要异步对象发生了变化就会调用这个回调函数 使用onreadystatechange
xmlhttp.addEventListener("readystatechange",function (){
/*readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪*/
if(xmlhttp.readyState ===4){
//判断 当http状态码在200到300之间 或者当http状态码等于304时 请求成功
if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304){
//5 处理返回的结果
console.log("接受到服务器发送的数据");
}else{
console.log("没有接受到服务器数据")
}
}
})
})
创建异步对象时的兼容性处理方案
//兼容性处理 兼容ie56低版本浏览器
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
针对ie浏览器低版本不自动更新数据的处理方案
xmlhttp.open("GET",url+'?t'+(new Date().getTime()),true);
xmlhttp.open("GET",url+'?t'+(Math.random()),true);
关于请求超时的处理方案
if (timeout){
timer = setInterval(function (){
console.log("请求超时")
xmlhttp.abort();
clearInterval(timer);
},timeout)
}
GET请求单独传递参数，将参数从URL中抽离出来
- 以对象形式传递参数
- 接收参数之后转换为需要的格式
- 在设置请求方式和请求地址时，将字符串拼接到URL中
ajax("ajax-get.php",{
"userName":"inj",
"pwd":"123abc"
},3000,function (xhr){
alert(xhr.responseText);
},function (xhr){
alert("服务器返回数据失败");
});
//封装函数 将对象形式转换为 userName=inj&pwd=123abc形式
function transtr(obj){
obj.t = new Date().getTime();
var arr = [];
for (key in obj){
//URI中不可以出现中文 如果出现了中文则需要转码
//转码使用encodeURIComponent方法
//URI中只可以出现数字/字母/下划线/ASCII码
arr.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));
}
return arr.join("&");
}
var str = transtr(obj);
xmlhttp.open("GET",url+'?='+str,true); //做兼容性处理
使用POST请求和使用GET请求的不同
xmlhttp.open("POST","07-post.php",true);
//以下代码必须要放到open和send中间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//使用send传递参数
xmlhttp.send("userName=zs&userPwd=321");
三. 完整的ajax封装
function transdata(data) {
//在转换之前先给data添加属性t 值为时间戳
data.t = new Date().getTime();
//把{'userName': 'ylf','userPwd': '123456'} 形式转换成 userName=ylf&userPwd=123456形式
var arr = [];
for (var key in data) {
//使用for in遍历数组
//将属性值：属性名形式转换为属性值=属性名形式 拼接到数组后面
arr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
//使用join方法将数组转换为字符串形式 使用&作为分隔符
return arr.join('&');
}
function ajax(option) {
//定义异步对象和计时器
var xhr, timer;
//0 .使用自定义的transdata函数将传递过来的参数由{'userName': 'ylf','userPwd': '123456'} 形式转换成 userName=ylf&userPwd=123456形式
var data = transdata(option.data);
//1. 创建一个异步对象 兼容低版本ie浏览器
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 设置请求方式和请求地址
if (option.type.toLowerCase() === "get") {
//3. get设置请求方式 将需要传递的参数拼接到url后面 方便php读取
xhr.open(option.type, option.url + "?" + data, true);
//3. get发送请求
xhr.send();
} else {
//3. 给post请求传参时open内容正常写 使用send方法传递参数
xhr.open(option.type, option.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//3. post发送请求
xhr.send(data);
}
//4. 监听异步对象状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
//请求完成之后停止计时器
clearInterval(timer);
//http状态码在200到300之间或者304时 说明网页正常响应
if (xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304) {
//处理返回结果
option.success(xhr);
} else {
//处理返回结果
option.error(xhr);
}
}
};
//为了防止请求时间过长 我们创建一个计时器
//判断是否传递了timeout参数
if (option.timout) {
timer = setInterval(function() {
console.log("请求超时");
//计时器到达时间之后我们停止请求 并打印请求超时
xhr.abort();
clearInterval(timer);
}, option.timeout);
};
}
使用封装好的ajax方法
ajax({
type: "post",
url: "04-ajax.php",
data: {
"userName": "ylf",
"userPwd": "123123"
},
timeout: 3000,
success: function(xhr) {
alert(xhr.responseText);
},
error: function(xhr) {
alert("请求失败");
}
})
})
四. jquery中的ajax
$('#form').on('submit',function(e){
e.preventDefault()
$.ajax{(
url:'/register',
type:'post',
//获取表单提交的数据 serialize()
data:$(this).serialize(),
dataType:'json',
success:function(data){},
error:function(){}
)}
})
jquery表单提交数据的内容使用serialize获取
五. xml和json
XML
XML 指可扩展标记语言（eXtensible Markup Language）。
XML 被设计用来传输和存储数据。
<?xml version:"1.0" encoding="UTF-8" ?>
<ylf>
<name>严立飞</name>
<age>18</age>
</ylf>
php调用xml
<?php
header("content-type:text/xml;charset=utf-8");
echo file_get_contents("info.xml");
JSON:
JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
php调用json
echo file_get_contents("08-ajax.json");
使用JSON.parse方法将json对象转换为js对象
JSON.parse(xhr.responseText)
