Ajax知识整理（一）
前面部分原文:https://www.cnblogs.com/le220/p/7989524.html
一. Ajax 客户端与服务器基本知识
一. 服务器
通俗的讲，能够提供某种服务的机器（计算机）称为服务器
1、服务器类型
2、 服务器软件
3、HTTP服务器
二、客户端
二. Ajax中同步请求和异步请求
同步请求和异步请求的区别
1、同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写！
2、异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。
3、同步和异步的区别
同步请求:
客户端请求(等待)->服务端处理->响应->页面载入
（缺少对象:XMLhttpRequest）
这时候如果有错误，只能再次发送请求，再次等待
异步请求：
比如当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的
总结：页面上的操作和服务器端的操作互相之间不会造成阻塞
====建立异步请求过程的4个步骤：============
a:new一个XHR对象 (创建异步对象)
b:调用open方法
c:send一些数据
d:对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情
ajax五步封装函数实现:
1 // 将 get 跟post 封装到一起 2 /* 3 参数1:url 4 参数2:数据 5 参数3:请求的方法 6 参数4:数据成功获取以后 调用的方法 7 */ 8 function ajax_tool(url,data,method,success) { 9 // 异步对象 10 var ajax = new XMLHttpRequest(); 11 12 // get 跟post 需要分别写不同的代码 13 if (method=='get') { 14 // get请求 15 if (data) { 16 // 如果有值 17 url+='?'; 18 url+=data; 19 }else{ 20 } 21 // 设置 方法 以及 url 22 ajax.open(method,url); 23 // send即可 24 ajax.send(); 25 }else{ 26 // post请求 27 // post请求 url 是不需要改变 28 ajax.open(method,url); 29 30 // 需要设置请求报文 31 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 32 33 // 判断data send发送数据 34 if (data) { 35 // 如果有值 从send发送 36 ajax.send(data); 37 }else{ 38 // 木有值 直接发送即可 39 ajax.send(); 40 } 41 } 42 43 // 注册事件(通过注册事件的方式接受返回的值) 44 ajax.onreadystatechange = function () { 45 // 在事件中 获取数据 并修改界面显示 46 if (ajax.readyState==4&&ajax.status==200) { 47 // console.log(ajax.responseText); 48 49 // 将 数据 让 外面可以使用 50 // return ajax.responseText; 51 52 // 当 onreadystatechange 调用时 说明 数据回来了 53 // ajax.responseText; 54 55 // 如果说 外面可以传入一个 function 作为参数 success 56 success(ajax.responseText); 57 } 58 } 59 }
jQuery操作Ajax实现:
1. $.get（url，{可直接写对象name：‘jack’，age：‘18’}，回调函数，参数4（从服务器获取的数据类型，可不写））
a) $.get(url,date,callback,type)
b) 如果参数4写json内部会JSON.parse（）自动转换
c) 不要擅自更换参数位置
2. $.post(url,date,function(date){},type)
1 $.ajax({ 2 url:‘’， 3 success：function（date）{}, 4 type:‘post/get’， 5 datatype：‘数据类型（json）’， 6 data：｛ 7 ‘name’：‘’， 8 ‘kill’：‘’ 9 ｝， 10 beforeSend：function（）｛ 11 console.log（‘发送之前调用’）； 12 return false；//阻止这次请求 13 //验证用户数据是否填了 14 ｝， 15 error：function（）｛ 16 console.log（‘请求失败后调用’） 17 ｝ 18 })
常见的Ajax请求引用: 验证用户名是否存在; 发送验证码; 微博,朋友圈更新内容; 发送手机号给服务器; 百度搜索,根据输入的内容,提示可能的值
触发Ajax请求的方式: 按钮的点击事件; 文本框的失去焦点事件; 滚动事件
