ajax
Ajax是一种使用现有技术集合,技术内容包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新
- 作用
- 不刷新页面而更新网页(局部刷新)
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 前端和后端负载平衡
- 优点:
- 在不刷新整个页面的情况下维持与服务器通信
- 使用异步的方式与服务器通信,不打断用户的操作
- 将一些后端的工作移到前端,减少服务器与带宽的负担
- Ajax 使得界面与应用分离,也就是数据与呈现分离
- 缺点:
- Ajax干掉了Back与History功能,即对浏览器机制的破坏
- AJAX 技术给用户带来很好的用户体验的同时也对 IT 企业带来了新的安全威胁,Ajax 技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
- 对搜索引擎支持较弱
- 不能很好地支持移动设备
- 如何使用Ajax?
- 创建XMLHttpRequest对象
- 使用open方法设置和服务器的交互信息
- URL是相对于当前页面的路径,也可以使用绝对路径
- Open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。
- 只能向同一个域中使用相同协议和端口的
URL 发送请求,否则会因为安全原因报错
- 设置requestHeader() request.setRequestHeader(属性名称, 属性值);
- send() 设置发送的数据,开始和服务器端交互
Post 传参:发送表单数据xhr.setRequestHeader(“Contenttype”,“application/x-www-formurlencoded; charset=utf-8”);
- 取得响应,注册事件
- Onreadystatechange(状态改变事件)
- readyState 属性:请求状态
- 0 :请求未初始化(还没有调用 open())
- 1 :请求已经建立,但是还没有发送(还没有调用 send())
- 2 :请求已发送,正在处理中(通常现在可以从响应中获取内容头)
- 3 :请求在处理中,通常响应中已有部分数据可用了,但是服务器还不有完成响应的生成。
- 4 :响应已完成,您可以获取并使用服务器的响应了。
New Function 方法
function toJson(str){ var json = (new Function("return" + str))(); return json;
}
ajax封装
function ajax(url,fnWin,fnFaild){
//1. 创建XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2. 与服务器建立连接
xhr.open('get',url,true)
//3. 发送请求
xhr.send();
//4.等待响应
xhr.onreadystatechange = function(){
//1. 请求状态
if(xhr.readyState === 4){
//2. 响应状态码
if(xhr.status === 200){
if(fnWin instanceof Function){
fnWin(xhr.responseText);
}else{
if(fnFaild instanceof Function){
fnFaild();
}
}
}
}
}
}
let ajax = {
get(url,fnWin,fnFaild){
//1. 手机
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2. 打电话
xhr.open('get',url,true);
//3. 说话
xhr.send();
//4. 听
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(/^(2|3)\d{2}$/.test(xhr.status)){
if(fnWin instanceof Function){
fnWin(xhr.responseText);
}
}else{
if(fnFaild instanceof Function){
fnFaild();
}
}
}
}
},
post(url,data,fnWin,fnFaild){
//1. 手机
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2. 打电话
xhr.open('post',url,true);
//在发送请求之前,一定要先设置请求头
xhr.setRequestHeader('Content-type','Application/x-www-form-urlencoded;charset=utf-8');
//3. 说话
xhr.send(data); //data的格式: key=value&key=value
//4. 听
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(/^(2|3)\d{2}$/.test(xhr.status)){
if(fnWin instanceof Function){
fnWin(xhr.responseText);
}
}else{
if(fnFaild instanceof Function){
fnFaild();
}
}
}
}
}
}
let $ = {
ajax(json){
//如果json中没有任何数据,怎么办?
if(!json){ //undefined
return;
}
//1. 初始化参数
//type
json.type = json.type.toUpperCase() || 'GET';
//url
json.url = json.url || '';
//data
json.data = json.data || null;
//async
json.async = json.async || true;
//success 成功的回调函数
json.success = json.success || function(){};
//error 失败的回调函数
json.error = json.error || function(){};
//2. data send('user=阿娇&age=18')
//先判断传递的是字符串还是对象
let arr = [];
let str = '';
if( json.data instanceof Object){ //
// console.log(json.data);
// {name:"john",location:"Boston"}
// "name=John&location=Boston"
// console.log(json.data.ps);
for(let key in json.data){
arr.push(key + '=' + json.data[key])
console.log(arr);
str = arr.join('&');
console.log(str);
}
}else{
str = json.data;
}
//3. 创建XMLHttpRequest对象
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//4. 与服务器建立连接
if(json.type === 'GET'){
//判断是通过url地址传递呢还是通过data传递
//https://www.baidu.com/s?wd=1&rsv_spt=1&rsv_iqid=0xfaeee45800249487&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_sug3=2&rsv_sug1=2&rsv_sug7=101&rsv_btype=i&prefixsug=1&rsp=2&inputT=1850&rsv_sug4=2067
if(json.url.includes('?')){
xhr.open(json.type,json.url,json.async);
}else{
//https://www.baidu.com/s
//'name=John&location=Boston'
xhr.open(json.type,json.url + '?' + str,json.async);
}
xhr.send();
}else if(json.type === 'POST'){
xhr.open(json.type,json.url,json.async);
//设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');
//5. 发送请求
xhr.send(str);
}
//6. 等待响应
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(/^(2|3)\d{2}$/.test(xhr.status)){
json.success(xhr.responseText);
}else{
json.error();
}
}
}
}
}