Ajax的基本执行原理和执行过程

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跨域请求场景

什么是跨域


为了解决这个跨域问题我们有以下2种方法

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;

1 声望
0 粉丝
0 条评论
推荐阅读
作用域和变量
作用域​ 作用域就是一个独立的地盘,让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。全局作用域与局部作用域最外层函数 和在最外层函数外面定义的变量拥有全...

caowanjing_code阅读 759

再也不学AJAX了!(三)跨域获取资源 ① - 同源策略
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第四篇,最近更新于 2023 年 1...

libinfs19阅读 4k评论 4

封面图
再也不学 AJAX 了!(一)AJAX 概述
跨域获取数据:介绍了与「跨域发送 AJAX 请求」相关的一些内容:例如「同源策略」与四种跨域请求资源的方式:JSONP,CORS,postMessage 和 WebSocket;

libinfs19阅读 3.9k评论 6

封面图
再也不学AJAX了!(二)使用AJAX ② Fetch API
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第三篇,最近更新于 2023 年 1...

libinfs2阅读 621

封面图
Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面

TANKING1阅读 4.4k

Y 分钟速成 jquery
jQuery是JavaScript的一个函数库,它可以帮你“写更少,做更多”。它集成了很多常见的JavaScript任务并且很容易调用。jQuery被世界各地的很多的大公司和开发者使用。它包括了AJAX,事件处理,文档操作以及很多其它...

小X学技术阅读 698

初识Ajax
初识Ajax浏览器&服务器浏览器作用: 输入网址, 即可浏览相关内容服务器作用: 为访问者提供各种资源 。资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等浏览器访问的资源在哪里存着?在服务器上存储浏...

H阅读 311

1 声望
0 粉丝
宣传栏