Ajax函数封装

Ajax函数封装01

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

---

html：

    function ajax (options){
      //创建ajax对象
      var xhr = new XMLHttpRequest()
      xhr.open(options.type,options.url)
      xhr.send()
      //当xhr对象接收完响应数据后出发
      xhr.onload = function() {
        console.log(xhr.responseText);
        options.success(xhr.responseText)
      }
    }

    //将形参这个对象传给实参options
    ajax({
      type: 'get',  //请求方式
      url: 'http://localhost:3000/xx', //请求地址
      //当请求成功时 也就是在onload之后调用success函数 将成功的数据传过来
      success: function(data) {
        console.log('success函数' + data);//回调函数
      }
    })

app.js

app.get('/xx1',(req,res) => {
  res.send('hello,ajax')
})

---

Ajax函数封装02

请求参数要考虑的问题

1. 请求参数位置的问题
   将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置

• get 放在请求地址的后面
• post 放在send方法中 并且注意post需要设置请求头

2. 请求参数格式的问题

• application/x-www-form-urlencoded 【 app.use(bodyParser.urlencoded())】
  参数名称=参数值&参数名称=参数值 name=zhangsan&age=20
• application/json 【app.use(bodyParser.json())】
  {name: ‘zhangsan’, age: 20}

1.传递对象数据类型对于函数的调用者更加友好.
2.在函数内部对象数据类型转换为字符串数据类型更加方便

发送get请求

    function ajax (options){
      //创建ajax对象
      var xhr = new XMLHttpRequest()
      //params为拼接请求参数的变量
      var params = ''
      for (const attr in options.data) {
        //将参数转换为字符串格式 name=zs&age=20
        params += attr + '=' + options.data[attr] + '&'
      }
      //多了一个&符号 进行截取
      params = params.substr(0,params.length-1)

      //判断请求方式 因为get要放在请求地址的后面 post要放在send方法中
      if (options.type == 'get') {
				options.url = options.url + '?' + params;
			}

      xhr.open(options.type,options.url)
      if(options.type == 'post') {
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(params)
      }else{
        //如果是get 发送空
        xhr.send()
      }
      //当xhr对象接收完响应数据后出发
      xhr.onload = function() {
        console.log(xhr.responseText);
        options.success(xhr.responseText)
      }
    }

    //将形参这个对象传给实参options
    ajax({
      type: 'get',  //请求方式
      url: 'http://localhost:3000/xx', //请求地址
      //当请求成功时 也就是在onload之后调用success函数 将成功的数据传过来
      data: {name:'zs',age:20},
      success: function(data) {
        console.log('success函数' + data);//回调函数
      }
    })

get :

post :
from data存放的post请求参数

Ajax函数封装03

1. 上述代码将请求头设置死了，应该改为传进来的参数，然后在函数内部进行配置。
2. 还未进行http状态码的判断

发送带有json请求头的post请求

    function ajax (options){
      //创建ajax对象
      var xhr = new XMLHttpRequest()
      //params为拼接请求参数的变量
      var params = ''
      for (const attr in options.data) {
        //使用for in循环对象 将参数转换为字符串格式 name=zs&age=20
        params += attr + '=' + options.data[attr] + '&'
      }
      //多了一个&符号 进行截取
      params = params.substr(0,params.length-1)

      //判断请求方式 因为get要放在请求地址的后面 post要放在send方法中
      if (options.type == 'get') {
				options.url = options.url + '?' + params;
			}
      xhr.open(options.type,options.url)
      if(options.type == 'post') {
        var contentType = options.header['Content-type']
        xhr.setRequestHeader('Content-Type',contentType)
        //如果传递的是json格式那么需要转换 如果传递的时普通格式就发送默认的数据
        if(contentType == 'application/json') {
          xhr.send(JSON.stringify(options.data))
        }else {
          xhr.send(params)
        }
       
      }else{
        //如果是get 发送空
        xhr.send()
      }
      //当xhr对象接收完响应数据后出发
      xhr.onload = function() {
        if(xhr.status == 200) {
          options.success(xhr.responseText,xhr)
        }else {
          options.error(xhr.responseText,xhr)
        }
        
      }
    }

    //将形参这个对象传给实参options
    ajax({
      type: 'post',  //请求方式
      url: 'http://localhost:3000/xx1', //请求地址
      //当请求成功时 也就是在onload之后调用success函数 将成功的数据传过来
      data: {name:'zs',age:20},
      header:{ 'Content-type':'application/json' },
      success: function(data) {
        console.log('success函数' + data);//回调函数
      },
      error:function(data,xhr) {
        console.log('error函数' + data);
        console.log(xhr);
      }
    })

app.js

app.post('/xx1',(req,res) => {
  res.send('hello,ajax')
})

---

Ajax函数封装04

使用ajax技术向服务端发送请求 一般返回json类型数据，但客户端拿到的是json字符串，所以要使用需要将json字符串转为json对象

 //当xhr对象接收完响应数据后出发
    xhr.onload = function() {
      //xhr.getResponseHeader() 获取响应头中的数据
      var contentType = xhr.getResponseHeader('Content-type')
      var responseText = xhr.responseText //服务器端返回的数据
      //如果响应类型中包含application/json
      if(contentType.includes('application/json')) {
        responseText = JSON.parse(responseText)
      }
      if(xhr.status == 200) {
        options.success(responseText,xhr)
      }else {
        options.error(responseText,xhr)
      }