nodejs+mongodb笔记------第七章（ajax）

AJAX简介
  AJAX全称Asynchronous javascript And XML，就是异步的JS和XML
  通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
  AJAX不是新的编程语言，不是新的一门独立的技术，而是一种使用现有标准的新方法。

XML简介
  XML可扩展标记语言
  XML被设计用来传输和存储数据
  XML和HTML类型，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

  比如说我有一个学生数据
    name="孙悟空";age=18;gender="男"
  用XML表示：
    
      孙悟空
      18
      男
    

  现在已经被JSON取代了
  用JSON表示：
    {"name":"孙悟空","age":18,"gender":"男"}

  AJAX的工作原理
    Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作与服务器响应异步化。

  AJAX的特点
    AJAX的优点
      1.可以无需刷新页面而与服务器进行通信
      2.允许你根据用户事件来更新部分页面内容
    AJAX的缺点
      1.没有浏览历史，不能回退 
      2.存在跨域问题
      3.SEO不友好
  
  核心对象
    XMLHttpRequest，AJAX的所有操作都是通过该对象进行的

原生AJAX

server.js

//1.引入express
let express = require('express')

//2.创建app服务对象
let app = express()
//暴露静态资源
app.use(express.static('public'))
//解析POST请求请求体中以urlencoded形式编码参数
app.use(express.urlencoded({extended:true}))


app.get('/test_get',(request,response)=>{
  console.log('一个GET请求来了',request.query)
  response.send('我是服务器响应GET请求的信息')
})

app.post('/test_post',(request,response)=>{
  console.log(request.body)
  console.log('一个POST请求来了')
  response.send('我是服务器响应POST请求的信息')
})

//4.绑定端口监听
app.listen(3000,(err)=>{
  if (!err) {
    console.log('【不要使用webstorm打开html页面，会存在跨域问题！！用以下地址】')
    console.log('测试原生js发送Ajax-GET请求的地址是：http://localhost:3000/ajax_get.html')
    console.log('测试原生js发送Ajax-POST请求的地址是：http://localhost:3000/ajax_post.html')
    console.log('测试自己封装的Ajax请求的地址是：http://localhost:3000/ajax_with_promise.html')
  }
  else console.log(err)
})

public/ajax_get.html

  
  



该页面是测试使用原生js发送Ajax-GET请求
点我使用原生js发送Ajax-GET请求

public/ajax_post.html

  
  



该页面是测试使用原生js发送Ajax-POST请求
点我使用原生js发送Ajax-POST请求

数组的reduce方法

public/ajax_with_promise.html

  
  


该页面使用Promise封装了原生Ajax
点我是我使用自己封装的方法发送GET请求
点我是我使用自己封装的方法发送POST请求

取消上一次请求

server.js

//1.引入express
let express = require('express')

//2.创建app服务对象
let app = express()
app.use(express.static('public'))

//根路由
app.get('/get_code',(request,response)=>{
  /*
  * 返回一个1000 - 9999
  * */
  console.log('客户端发来了获取验证码的请求')
  setTimeout(function () {
    let code = Math.floor(Math.random()*8999 + 1000)
    response.send(code.toString())
  },2000)
})

//4.绑定端口监听
app.listen(3000,(err)=>{
  if (!err) console.log('http://localhost:3000/')
  else console.log(err)
})

public/index.html

  
  


点我获取验证码

jQuery封装的Ajax

server.js

//引入express框架
let express = require('express')
//创建app应用对象
let app = express()
//暴露静态资源
app.use(express.static('public'))
//引入服务器内部具体实现
app.disable('x-powered-by')
//用于解析post请求的请求体参数
app.use(express.urlencoded({extended:true}))

app.get('/test_get',(request,response)=>{
  console.log(request.query);
  console.log('test_get路由被调用了')
  response.send('我是服务器返回的GET请求的信息')
})

app.post('/test_post',(request,response)=>{
  console.log(request.body);
  console.log('test_post路由被调用了')
  response.send('我是服务器返回的POST请求的信息')
})

app.listen(3000,(err)=>{
  if(!err) console.log('测试jQuery封装的Ajax请求的地址是：http://localhost:3000/jquery_ajax.html')
  else console.log(err)
})

public/jquery_ajax.html

  
  


该页面是测试：jQuery发送Ajax请求

点我使用jQuery发送Ajax-GET请求
点我使用jQuery发送Ajax-POST请求