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;