Ajax封装及简单应用

Posted 最好的me

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax封装及简单应用相关的知识,希望对你有一定的参考价值。

AJAX = Asynchronous javascript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

可将AJAX封装成库,方便调用,大致分四步:

  1.     创建Ajax对象
  2.     连接服务器
  3.     发送请求
  4.     接受返回值

具体代码如下:

function ajax(url,fnSucc,fnFaild){
    // 创建Ajax对象
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXobject("Microsoft.XMLHTTP");
    }
    // 连接服务器
    oAjax.open(‘GET‘,url,true); // true表示要通过异步传输

    // 发送请求
    oAjax.send();

    // 接收返回
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState == 4){ // 读取完成
            if(oAjax.status == 200){  // 成功
                fnSucc(oAjax.responseText);
            } else {
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }
}

通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。这里,不能根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性,一是因为这个字符串本身可以伪造,二是通过IE版本判断JavaScript特性将非常复杂。

当创建了XMLHttpRequest对象后,要先设置onreadystatechange的回调函数。在回调函数中,通常我们只需通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。

readyState有五个值,如下:

0 --> (未初始化)还没有调用open方法

1 -->  (载入)已调用send()方法,正在发送请求

2 -->  (载入完成)send()方法完成,已收到全部响应内容

3 -->  (解析)正在解析响应内容

4 -->  (完成)响应内容解析全部完成,可以在客户端调用了

封装的库取名为 ajax.js,将它引入代码中,就可以直接调用,下面先创建一个数据库 data.txt:

[{name: 张三, password: 123},{name: 李四, password: 321},{name: 王五, password: 456},{name: 小明, password: 654},{name: 小红, password: 789}]

通过点击按钮获取数据:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="ajax.js"></script>
<script>
    window.onload = function() {
        var oBtn = document.getElementById(btn);
        oBtn.onclick = function() {
            ajax(data.txt, function(str) {
                alert(str);
            });
        };
    };
</script>
</head>
<body>
    <input type="button" id="btn" value="读取数据">
</body>
</html>

over!

以上是关于Ajax封装及简单应用的主要内容,如果未能解决你的问题,请参考以下文章

Spring MVC 3.2 Thymeleaf Ajax 片段

React ajax请求 及axiospubsubfetch使用

vue2.0封装自己的ajax模块

使用原生ajax及其简单封装

2.封装简单的Ajax

2.封装简单的Ajax