JavaScript 学习&封装一个AJAX函数

一个渣渣PHP自学者 2020-03-23 PM 157℃ 0条

学习了这么久的JavaScript,依旧是那个渣渣的我。依旧一个功能写不出来!

那么今天在水一篇博客。刚学习的ajax封装。

先了解一下AJAX:

什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
  • AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
  • AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

AJAX 应用

  • 运用XHTML+CSS来表达资讯;
  • 运用JavaScript操作DOM(Document Object Model)来执行动态效果;
  • 运用XML和XSLT操作资料;
  • 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换;

  • 注意:AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

AJAX - 创建 XMLHttpRequest 对象

// 创建Ajax对象
var xhr = new XMLHttpRequest();

AJAX - 向服务器发送请求请求

// 告诉Ajax对象要向哪发送请求
xhr.open('get','http://localhost:3000/code');
// 发生请求
xhr.send();

是该发送GET请求 还是 POST请求?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

一个简单的 GET 请求:

var params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax
xhr.open('get','http://localhost:3000/get?'+params);
// 发送
xhr.send();

注意:get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。

一个简单 POST 请求:

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

var params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax
xhr.open('post','http://localhost:3000/post');
// 报文头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 发送
xhr.send(params);

获取服务器响应到客户端的数据

 // 获取服务器响应到客户端的数据
     xhr.onload=function(){
        // xhr.responseText
        // alert(xhr.responseText);
    };

Ajax 状态码

在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态码。
  • 0:请求未初始化(还没有调用open())
  • 1:请求已经建立,但是还没有发送(还没有调用send())
  • 2:请求已经发送
  • 3:请求正在处理中,通常响应中已经有部分数据可以用了
  • 4:响应已经完成,可以获取并使用服务器的响应了

使用 xhr.readyState // 获取Ajax状态码
一个小例子

    var xhr = new XMLHttpRequest();
    // 0 已经创建ajax对象 但还没有对ajax对象进行配置
    console.log(xhr.readyState);
    // 1 已经对ajax进行配置 但是还没有发送
    xhr.open('get', 'http://localhost:3000/code');
    console.log(xhr.readyState);
    // 当ajax状态码发生变化的时候触发
    xhr.onreadystatechange = function () {
        // 2 请求已经发送
        // 3 已经接受到服务端的部分数据
        // 4 服务器端的响应数据已经接受完毕
        console.log(xhr.readyState);
        // 对状态码进行判断
        if (xhr.readyState == 4) {
            console.log(xhr.responseText);
        }
    }
    xhr.send();

onreadystatechange 事件

当 Ajax 状态码发生变化时将自动触发该事件。
在事件处理函数中可以获取 Ajax 状态码并对其进行判断,当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了。

 // 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

之前我们例子使用的是onload 最后我们也简绍了onreadystatechange事件
下面是两种方式的区别。由于IE基本不用考虑了,所以我们推荐使用onload
方式区别.png

上面长篇大论就是了解一下原始的Ajax,如果代码多了,那么发送一次请求代码过多,发送多次请求代码冗余且重复的问题
解决方案:将请求代码封装到函数中,发请求时调用函数即可。

下面进入正题 Ajax 封装

实现效果(调用方法)

ajax({ 
     type: 'get',
     url: 'http://localhost/',
     success: function (data) { 
         console.log(data);
     }
 })

首先我们声明一个函数
每一次我们需要发送请求类型、地址、数据、报文头部、返回的结果,那么我们可以声明一个默认的对象

function ajax(options) {
    // 默认参数
      var defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function() {},
        error: function() {}
      }
      // 使用options对象中的属性覆盖defaults对象中的属性
      Object.assign(defaults, options)
      // 创建ajax对象
      var xhr = new XMLHttpRequest()
      // 配置ajax对象
      xhr.open(defaults.type, defaults.url)
        // 发送请求
       xhr.send()

      xhr.onload = function() {
        // 服务器端返回的数据
        var responseText = xhr.responseText
        // console.log(responseText);
       
      }
    }

然后我们分析一下在请求的时候有get和post请求,而且类型还不一样,那么每一次都需要声明,显得麻烦,我们可以进行判断
判断type
如果是get, 参数就挂在url上,(url?params),send()
如果是其他type, 参数就放在send中传递,send(sendParams),但需要在open和send之间先设置请求头信息

// 拼接请求参数
  var params = ''
  for (var attr in defaults.data) {
    params += attr + '=' + defaults.data[attr] + '&'
  } 
  // 剪去最后的&
  params = params.substr(0, params.length - 1)
  console.log(params)
  // 判断请求方式
  if (defaults.type == 'get') {
    defaults.url = defaults.url + '?' + params
  }

在获得请求类型后,我们还需要在发送数据请求的时候对类型进行不一样的参数传递

    // 配置ajax对象
      xhr.open(defaults.type, defaults.url)
      if (defaults.type == 'post') {
        var ContentType = defaults.header['Content-Type']
        xhr.setRequestHeader('Content-type', ContentType)

        if (ContentType == 'application/json') {
          xhr.send(JSON.stringify(defaults.data))
        } else {
          xhr.send(params)
        }
      } else {
        // 发送请求
        xhr.send()
      }

最后一步就是进行响应返回

      // 监听xhr对象下面的onload事件
      // 当xhr对象接受完响应数据后触发
      xhr.onload = function() {
        // 获取响应头中的数据
        var contentType = xhr.getResponseHeader('Content-Type')
        // 服务器端返回的数据
        var responseText = xhr.responseText
        // console.log(xhr.getResponseHeader('Content-Type'));
        if (contentType.includes('application/json')) {
          // 将json字符串转换成json对象
          responseText = JSON.parse(responseText)
        }
        // 当http=200时
        if (xhr.status == 200) {
          // 成功
          defaults.success(responseText, xhr)
        } else {
          defaults.error(responseText, xhr)
        }
      }

完整代码

   function ajax(options) {
      var defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function() {},
        error: function() {}
      }
      // 使用options对象中的属性覆盖defaults对象中的属性
      Object.assign(defaults, options)
      // 创建ajax对象
      var xhr = new XMLHttpRequest()
      // 拼接请求参数
      var params = ''
      for (var attr in defaults.data) {
        params += attr + '=' + defaults.data[attr] + '&'
      } 
      // 剪去最后的&
      params = params.substr(0, params.length - 1)
      console.log(params)
      // 判断请求方式
      if (defaults.type == 'get') {
        defaults.url = defaults.url + '?' + params
      }
      // 配置ajax对象
      xhr.open(defaults.type, defaults.url)
      if (defaults.type == 'post') {
        var ContentType = defaults.header['Content-Type']
        xhr.setRequestHeader('Content-type', ContentType);
        if (ContentType == 'application/json') {
          xhr.send(JSON.stringify(defaults.data))
        } else {
          xhr.send(params)
        }
      } else {
        // 发送请求
        xhr.send()
      }
      // 监听xhr对象下面的onload事件
      // 当xhr对象接受完响应数据后触发
      xhr.onload = function() {
        // 获取响应头中的数据
        var contentType = xhr.getResponseHeader('Content-Type')
        // 服务器端返回的数据
        var responseText = xhr.responseText
        // console.log(xhr.getResponseHeader('Content-Type'));
        if (contentType.includes('application/json')) {
          // 将json字符串转换成json对象
          responseText = JSON.parse(responseText)
        }
        // 当http=200时
        if (xhr.status == 200) {
          // 成功
          defaults.success(responseText, xhr)
        } else {
          defaults.error(responseText, xhr)
        }
      }
    }

非特殊说明,本博所有文章均为博主原创。

上一篇 JavaScript 学习&踏入“正则”的大门
下一篇 没有了

评论啦~