Ajax的根本执行原理和执行过程
通过xmlHttpRequest对象向服务器发送异步申请，获取服务器返回数据后，利用dom操作来更新页面。
外围局部是xmlHttpRequest对象，在生命周期的每个阶段xmlHttpRequest对象的不同函数，通过xmlHttpRequest来判断函数执行。
method参数示意申请形式，GET,POST,或者PUT。
URL参数示意门路，也能够绝对路径。
send函数，向服务器发送申请。
setRequestHeader('key','value')函数：设置申请头中属性为key的值为value，在设置申请头之前须要先调用open()函数，设header将随着send()函数一起发送。
创立XML
function createXMLHttp(){ //code for IE7 Firefox Chrome Opera Safari if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } //code for IE6 IE5 if(window.ActiveXObject){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("msxm12.XMLHTTP"); } catch(ex){} } }}建设链接
当XMLHttpRequest对象创立结束后，便能够通过open()函数建设链接，它指定了申请的url地址以及通过url传递的参数，默认值为true，示意采纳异步传输的形式。
发送申请并传递数据
能够应用send()函数发送申请，并传递数据content
解决响应
通过HTTP申请status状态码判断，当status值为200时代表申请胜利。
Ajax的长处
无需刷新就更新数据
异步通信
前后端拆散。
毛病
毁坏浏览器失常后退性能。
Nodejs服务器
应用ajax提交form表单
form表单自定义的会刷新页面。form提交会传递发送信息。
form表单和Ajax几乎就是绝配。
能够间接封装Ajax.
和后面Ajax的提交传递办法一样。
步骤
创立XMlHttpRequest对象
function createXMLHttp(){ //code for IE7 Firefox Chrome Opera Safari var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } //code for IE6 IE5 if(window.ActiveXObject){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("msxm12.XMLHTTP"); } catch(ex){} } } return xmlhttp;}var xhr = createXMLHttp();建设连贯
发送申请用POST办法，能够了解为用户注册办法
xhr.open('post','/saveUser',true);设置申请头
发送的是POST申请，须要设置数据传输格局，即设置Content-type属性值，能够通
过setRequestHeader()函数对其进行设置，将其值设置为比拟广泛的JSON数据格式。
xhr.setRequestHeader('Content-type','application/json;charset=UTF-8');获取数据
通过dom操作获取数据
var username = document.getElementById('username').value;.........发送申请
xhr.send(content);解决响应
回调函数中判断
xhr.onreadystatechange = function(){ //当readyState为4，且状态码为200时代表申请胜利 if(xhr.readyState ===4 && xhr.status ===200){ //解决响应值 document.write(xhr.responseText); }}get形式和post形式的区别
get 形式和 post 形式都能够向服务器发送申请，只是发送的机制不同
1.get申请将参数增加到URL地址前面，并没有申请，它并不send进来。
2.服务端参数获取，应用Express作为服务端框架，get申请通过Request.query来获取参数。
3.get传递的数据很小。
4.安全性低。
post申请通过申请体进行数据传输，数据不会呈现在URL上。
get是用来url传递参数。批改不了。
POST传递的数据量大，用于增删改查的实现。
JSON序列化
JSON.stringify()函数
它是将对象或者数组转化为JSON字符串
只能转化对象或者数组。
转化为大写
function replacerFn(key,value){ if(typeof value==='string'){ return value.toUpperCase(); } return value;}console.log(JSON.stringify(obj,replacerFn));自定义toJSON()函数
你能够间接在外面定义，想定义什么都能够
JSON.parse()函数
反序列化
JSON.parse(text,[,reviver]);肯定要是json字符串，属性要用json穿起来。
Ajax跨域申请场景
CORS
利用场景：
跨域申请
app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "http://127.0.0.1:4000"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next();});JSONP
在网页中动静增加一个script标签，通过script标签向服务器发送申请，在申请中会携带一个申请的
callback回调函数名。
服务器在接管到申请后，会解决响应获取返回的参数，而后将参数放在callback回调函数中对应的地位，并将callback回调函数通过json格局进行返回。
window.onload=function(){ var btn = document.querySelector('#btn'); btn.addEventListener('click',function(){ buildJSONP(); }); var buildJSONP = function(){ //输出参数--学号 var studentNo = document.querySelector('#studentNo').value; //申请参数，其中蕴含回调函数 var param = 'studentNo='+studentNo+'&callback=successFn'; //申请的url var url = 'http://localhost:3000/getUserByStudentNo?'+param; var script = document.createElement('script'); script.src=url; document.body.appendChild(script); } }设置的回调函数
用于输入服务端响应的返回值
var successFn = function(result){ console.log(result);};解决跨域申请的服务器
用于代码拼接返回调用
解决函数调用的问题。
app.get('/getUserByStudentNo',function(req,res){ //获取申请参数studentNo var studentNo = req.query.studentNo; //获取申请的回调函数callback var callbackFn = req.query.callback;