乐趣区

关于ajax:Ajax

jiezi

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 序列化

  1. 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;
退出移动版