博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jsday24
阅读量:4993 次
发布时间:2019-06-12

本文共 2056 字,大约阅读时间需要 6 分钟。

 

1、梳理知识点
①ajax作用  页面无刷新
②ajax的异步 : 同时分开执行
③get/post :    
④ajax如何请求服务器数据
  status   200  404  500 400
  readyState    0 1 2 3 4
⑤服务器传回的数据是字符串  需要转换  JSON.parse(  )
⑥ie传中文  encodeURI()
⑦ajax缓存 
⑧接口 url
 
 
2、ajaxPost
从服务器获取数据   同get
向服务器发送数据时  需要设置请求头    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
(ajax使用post提交数据需要设置请求头)
 
3、同源策略
同源 :同一个来源  , 协议  域名  端口号
 
http://localhost:80  
http://localhost:8020
 
当使用ajax请求服务器数据时,需要保证 协议  域名 和端口号要和ajax请求的路径保持一致  
同源策略 是浏览器的一个安全机制 , 为了保证用户数据的安全
ajax受 同源策略的影响 不能跨域
 
4、jsonp跨域(前端跨域)
json with padding
 
jsonp跨域原理 :
①动态创建script标签 添加到body中
②设置script标签的src属性 ,
属性值是一个接口 , 接口上有一个特殊参数,表示回调函数
③服务器通过对回调函数的调用  使用参数传递的方式将服务器处理的结果传回到客户端
 
jsonp接口和ajax接口区别 : 
①jsonp的接口一定会有一个回调函数   ajax接口没有
②jsonp接口返回的数据类型是object  ajax接口返回字符串
③jsonp接口只支持get方式传递数据  路径传值
 
 
5、promise对象  (ajax封装,使用promise对象)
  promise :承诺   构造函数
 promise对象的三个状态 : 
 pending 进行中
  resolved  已解决  
  rejected  失败
promise对象承诺执行成功后,会自动执行then方法  then方法第一个参数表示成功后执行参数,第二个参数表示失败后执行的参数
失败后还有可能会执行catch方法
promise对象的状态一旦发生改变 就不可逆
 
ajax封装
function ajaxGet(url,callback){    var xhr = null;    if( window.XMLHttpRequest ){        xhr = new XMLHttpRequest();    }else{        xhr = new ActiveXObject("Microsoft.XMLHTTP");    }    xhr.open("get",url);    xhr.send();        xhr.onreadystatechange = function(){        if( xhr.readyState==4 && xhr.status == 200 ){            //服务器返回的数据  var res =  xhr.responseText;            //当得到服务器返回的结果后  处理的功能是可变             callback(xhr.responseText);        }    }}//ajax封装 使用promise对象function ajaxPromise(url){    var pro = new Promise(function(succ,failed){        var ajax = new XMLHttpRequest();        ajax.open( "get" , url );        ajax.send();        ajax.onreadystatechange = function(){            if( ajax.readyState == 4 && ajax.status == 200 ){                //成功了 ajax.responseText                succ(ajax.responseText);//通知promise对象ajax请求服务器的数据成功了            }        }        //承诺多久后如果没有通知promise对象成功  就通知失败        setTimeout( function(){            failed("请求服务器失败");        },5000 )    })        return pro;}

 

 

转载于:https://www.cnblogs.com/cqdd/p/10315320.html

你可能感兴趣的文章
hdu3371
查看>>
zoj1456 Minimum Transport Cost
查看>>
悬挂else引发的问题
查看>>
js题集29--部分题目在线答题链接地址
查看>>
PCLint 帮助中关于如何获得gcc/g++编译宏定义和头文件搜索目录的方法说明
查看>>
依赖注入模式
查看>>
Backbone.js之Todo源码浅析
查看>>
传统软件企业之殇
查看>>
[bzoj4491]我也不知道题目名字是什么
查看>>
CSS pusle雷达动画实现
查看>>
【问题解决方案】之 Word 公式编辑器 使用小tips
查看>>
模拟凡客导航
查看>>
BZOJ4804: 欧拉心算
查看>>
sublime text 3中安装ctags支持函数跳转,安装convertToUtf8支持中文步骤[工具篇]
查看>>
静态类和单例模式区别
查看>>
团队冲刺第一天
查看>>
二分查找法查找数组元素下表
查看>>
第四章 数据类型
查看>>
php-cgi.exe
查看>>
5.7 Windows常用网络命令
查看>>