Ajax相关概念：
进程和线程
- 进程：程序从开始到结束的过程。
- 线程：程序中同时运行的多个分支中的一个。
- 多线程：多个线程同时运行的技术，可以防止线程阻塞。
同步和异步
- 同步：在同一个线程中执行(串行执行)
- 同步就是张三叫李四去吃饭。李四说还有点事没忙完。于是张三等李四忙完后再一起去吃饭
- 异步：在不同的线程中执行(并行执行)
- 异步就是张三叫李四去吃饭 李四说还有点事没忙完。张三自己先去吃饭了。 李四忙完后自己再去吃饭
请求与响应
Request：从客户端发送给服务器的请
Response：从服务器发送给服务端的响应
Ajax核心对象
- XMLHttpRequest 简称XHR对象
同步ajax请求
//创建xhr对象
var xhr = new XMLHttpRequest();//不支持ie6-
var xhr = new ActiveXObjext("Microsoft.XMLHTTP");//支持ie6-
- 封装一个创建XHR的函数 使其兼容ie6-
function createXHR(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObjext("Microsoft.XMLHTTP");
}
}
var xhr = createXHR();
- 调用open方法：在发送请求前准备内容并不会真正发送请求，只是启动一个请求以备发送
xhr.open("get","person.json",false);
//第一个参数：请求方式：一般有get和post
//第二个参数：接口(url)，只能向同一个域中使用相同端口和协议的url发送请求（同源策略）
//第三个参数：false同步，true异步
同源策略简介
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
- 调用send()方法：发送请求，接受一个参数：作为请求主体发送的数据 如果没有的话(get方法)就写null
xhr.send(null);
- 接受数据
异步Ajax请求
//3.调用send方法
xhr.send(null);
//取消异步请求
//xhr.abort();
//4.接受数据
xhr.onreadystatechange=function(){
//xhr.readyState==4 服务器处理完成
//xhr.status==200;处理的结果是成功的
if(xhr.readyState == 4&& xhr.status ==200){
console.log(xhr.responseText);
}
console.log(xhr.readyState);
不管服务器多快 这是一个异步操作，后面的代码肯定先执行 因为在你内部新建一个线程会消耗时间
//和延时器一样 因为他是一个异步操作，不管再快也是后面的先执行
setTimeout(()=>{
console.log('0');
},0)
console.log("1");
请求头、get和post的区别
post请求 参数要放在请求体中
http可以分为：请求头和请求体
请求头：包含http的头部信息
服务器返回的响应头信息和客户端发送出去的请求头信息
我们可以获取响应头信息或者设置请求头信息
get和post的区别：
1.get和post 都可以获取和提交数据，但是get主要用来获取数据，而post主要用来提交数据
2.get提交的参数大小较小一般在2kb之内，post提交数据可以是很大的，一般不超过4GB
3.get的参数是接在url后面，post是在请求体内，post更安全
4.get的速度更快(相比较post来说)
Ajax跨域问题
-
解决Ajax跨域问题一般有以下两种方式：
* 1，JSONP
* 2，由服务器端支持跨域 header(‘Access-Control-Allow-Origin:*’)php* ajax跨域： * 1.将后台代码和客户端代码放在一个服务器下，使用同一个服务器的相同域名，协议和端口号去访问 * 2.后台支持允许跨域 * 3.不适用ajax 使用JSONP * * jsonp只不过是被包含在函数调用中的JSON * JSONP的优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制 * 它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持 * 并且在请求完毕后可以通过调用callback的方式回传结果。 * JSONP的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求； * * JSONP实现跨域的原理： * JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 * JSONP本身就是一个get请求，而script节点本身也是一个get请求，这个思想是通过后端的配合（后端输出的 response text必须符合js语法）更好的利用了get请求而已。 * 而前端封装一个方法，通过这个方法把请求注册的回调指向全局的一个具体名字的函数，同时把具体名字函数的函数名和参数通过get请求传递给后端而已。 jsonp 包含两个东西：一个是回调函数 一个是数据 回调函数：当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的 数据：传入回调函数中的json数据
###Ajax封装
//创建XHR
function createXHR(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveObject("Microsoft.XMLHTTP");
}
}
//封装ajax
function ajax(obj){
//1.创建xhr对象
var xhr= createXHR();
//2.open
var paramstr = getParamStr(obj.data);
if(obj.type.LowerCase() == "get"){
obj.url +=paramstr.length>0?("?"+paramstr):"";
}
xhr.open("obj.type", "obj.url", "obj.async");
//3.send
if (obj.type.toLowerCase() == "post") {
xhr.send(paramstr);
}
else if (obj.type.toLowerCase() == "get") {
xhr.send(null);
}
//4.接受数据
if (obj.async == true) {//异步
xhr.onreadtstatechange = function () {
if (xhr.readyState == 4) {
callback();
}
}
} else {//同步
callback();
}
}
function getParamStr(obj) {//获取参数字符串 传的对象转为字符串
let arr = [];
for (var key in obj) {
var str = key + "=" + obj[key];//obj的属性是变量不能用点 要用[]
arr.push(str);
}
return arr.join('&');//用&去拼接
}
//因为同步和异步的某些代码是一样的所以我们抽离出来一个函数
function callback() {
if (xhr.status == 200) {
//请求成功
// console.log(xhr.responseTest);
if (obj.success) {
obj.success(xhr.responseText);
}
} else {
//请求失败
if(obj.fail){
obj.fail(xhr.status);
}
}
}
ajax({//传个参数 是个对象 对象有属性(参数)有函数(回调函数)
type:"get",//请求方式
url:"person.json",
data:{regname:"zhangsan",pwd:"123456"},//传的参数
async:true,//是否异步
//回调函数
//请求成功
success:function(data){
console.log(data);
},
//请求失败
fail:function(){
console.log("请求失败！");
}
});
如果有哪里写的不正确，请批评指正。
本文纯属原创，如有侵权，请速联系我删除。
