ajax

ajax作用

ajax就是用来异步向服务器请求数据并且处理返回回来的数据将结果显示在页面上。

XML

XML是用来存储和传输数据的，XML中的标签都是自定义的，以前服务器端给客户端返回的就是XML格式的数据，现在换成JSON了

AJAX请求

const express = require('express')

const app = express()

app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('你好get，成功')
})
//可以接受任意类型的请求
app.all('/server',(request,response)=>{
    //设置响应头允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应头允许自定义请求头
    response.setHeader('Access-Control-Allow-Headers','*')
    response.send('你好post，成功')
})
app.all('/jsonserver',(request,response)=>{
    //设置响应头允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应头允许自定义请求头
    response.setHeader('Access-Control-Allow-Headers','*')
    let data = {
        name:'ahuo'
    }
    let str = JSON.stringify(data)
    setTimeout(()=>{
        response.send(str)
    },3000)
})
app.listen(8000,()=>{
    console.log('服务开启成功');
})

const xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:8000/server')
//这里等号用冒号也可以
xhr.send('a=100&b=200&c=300')
//readystate是xhr对象中的属性，表示状态
//0表示未初始化
//1表示open方法已经调用完毕
//2表示send方法调用完毕
//3表示服务端返回了部分结果
//4表示服务端返回了所有结果
//所以这个函数就是状态改变的时候触发，总共触发4次
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
            if(xhr.status === 200){
                setContent(xhr.response)
            }
          }
}

<button onClick={()=>{
        xhr = new XMLHttpRequest()
        xhr.responseType = 'json'
        xhr.timeout = 4000 //设置四秒内需要请求到数据
        xhr.ontimeout = function(){
          alert('请求超时')
        } //设置超过两秒则取消并提示请求超时
        xhr.onerror = function(){
          alert('网络错误')
        } //设置没有网络的情况下提示网络错误
        xhr.open('POST','http://127.0.0.1:8000/jsonserver?t='+Date.now())//解决IE缓存的问题
        xhr.setRequestHeader('name','ahuo')  //设置请求头
        xhr.send("username=ahuo&password=123456")//在post的时候写，作为请求体
        xhr.onreadystatechange= ()=>{
          if(xhr.readyState === 4){
            if(xhr.status === 200){
                setContent(xhr.response.name)
            }
          }
        }

      }}>点击获取数据</button>
      <button onClick={()=>{
         xhr.abort() //会马上取消请求
      }}>取消发送</button>
      <div>{content}</div>