AJAX的学习使用

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cbd306de51d456e2b15f624

文章标签：

#javascript #php #json #ViewUI

本文深入探讨AJAX的工作原理，包括其优缺点、常见应用场景及如何使用原生JS实现AJAX请求。同时，提供了AJAX方法的封装技巧，以及jQuery的AJAX封装示例，帮助读者更好地理解和应用AJAX技术。

AJAX的优缺

优点 1.页面不刷新的情况下修改数据 2.异步通信，响应快 3.建奇功服务器负担
缺点 1.浏览器back失效，对浏览器返回功能造成破坏 2.有安全隐患 3.对搜索引擎支持差 4.无法用URL直接访问

常用场景

登录注册数据验证(用户不存在或者已经存在)
下拉搜索数据提示
......

利用原生JS来写一个AJAX方法

1.首先，先创建一个变量用来储存XMLHttpRequest对象

var http = null;
复制代码

2.创建XMLHttpRequest对象

http = new XMLHttpRequest();
复制代码

3.利用open(...)方法进行配置

open方法有三个参数，分别是

method （请求方式）
url （请求地址）
async （是否异步）第一个参数设置其请求方式，如常见的GET和POST，第二个参数设置URL，可以是后台文件路径也可以是网络地址。第三个是问你是否需要异步请求，这里一般建议true，毕竟ajax其作用就是异步获取数据。

http.open('GET' , '/api/test.php?name=wang' , true);
复制代码

如果为POST提交的话，那么需要设置请求头部，在把参数设置在sen();中

http.open('POST','/api/test.php',true)
http.setRequestHeder(xxxxx格式);
http.send('name=wang');
复制代码

4.通过XMLHttpRequest,send()提交

http.send();
复制代码

5.对服务器响应做处理

提交请求后，我们可以通过onreadystatechage去监测响应，看下是否成功，readyState一共有五个状态，到达4的时候说明相应内容已经解完成了，也可以通过XMLHttpRequest.onload来代替，当等于4时，通过status获取状态码。

http.onload = function (){
  if(http.status === 200){
    console.log('ajax yes!');
  }else{
    console.log('ajax no!')
  }
}
复制代码

状态码详解

状态码	信息
200	表示响应结果请求被正常处理了
204	表示请求资源成功，但是没有资源可以返回
206	表示请求资源的某一部分，响应中包含content-range
301	表示资源的访问路径(URL)被变更
302	表示请求的资源已经在其他位置了，但是默认你已经知道了
303	表示请求的资源已经在其他位置了，应使用 GET 方法定向获取请求的资源。
304	表示资源已经请求到到了，但是未能按照正常的方式请求
307	临时重定向。
400	请求报文中存在语法错误，需要修改请求内容重新请求
401	需要通过http认证，若之前已进行过 1 次请求，则表示用户认证失败
403	服务器拒绝你的的访问
404	服务器上没有请求的资源，可能是地址写错了.......
405	客户端的请求方法被服务器禁止
500	服务器资源发生了错误
503	服务器无法请求
总结	2xx为请求成功，3xx为URL被改变了，4xx客户端错误，5xx服务器错误

封装ajax方法

 /**
    /**
     * ajax封装，参数传递一个对象
     * url : 请求地址
     * type : 请求方式
     * dataType : 请求值返回值
     * data : 参数对象
     * async ： 异步
     * success : function 成功函数 => 参数是响应内容
     * error : function 异常函数 => 参数内容是响应码
     **/
    var ajax = function (obj) {
        //默认传入一个对象,如果没有，就为空对象
        obj = obj || {};
        //默认GET请求
        obj.type = (obj.type || 'GET').toUpperCase();
        //默认返回JSON数据
        obj.dataType = obj.dataType || 'JSON';
        //默认异步请求
        obj.async = obj.async || true;
        //参数处理,执行getParams方法
        var data = getParams(obj.data);
        var http;
        /**
         * 创建AJAX的实例适配
         * W3C使用XMLHttpRequest
         * IE使用ActiveXObject('Microsoft.XMLHTTP');
         * */
        if (window.XMLHttpRequest){
            //w3c
            http = new XMLHttpRequest();
        }else {
            //IE
            http = new ActiveXObject('Microsoft.XMLHTTP');
        }
        /**
         * 请求方式的封装
         * GET和POST请求
         * */
        if (obj.type === 'GET'){
            http.open("GET",obj.url+'?'+data,obj.async);
            http.send();
        }else if (obj.type === 'POST'){
            http.open('POST',obj.url,obj.async);
            //设置头部参数
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //提交post数据
            http.send(data);

        }
        /**
         * 监听响应接口
         * 如果步骤4的请求状态码为正确的就执行success函数
         * 如果错误的话就执行error函数
         * */
        http.onreadystatechange = function () {
            if (http.readyState === 4){
                //如果响应内容完成了，判断状态码
                var status = http.status;
                if (status >= 200 && status < 300){
                    //回调
                    obj.success && obj.success(http.responseText,http.responseXML);
                } else {
                    obj.error && obj.error(status);
                }
            }
        };
    };
    /**
     * 对象参数的处理
     * 转换成为需要的字符串
     */
    function getParams(data) {
        var arr = [];
        for (var param in data){
            arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
        }
        console.log(arr);
        arr.push(('randomNumber=' + Math.random()).replace('.'));
        return arr.join('&');
    }
复制代码

jQuery的AJAX封装方法

jQuery封装的ajax的使用 GET

$.ajax({
	type:'get',
	url: "url",
	data:{'foo':'bar'},
	success: function(res) {
	    load_content(res);
	}
});	
复制代码

POST

$.ajax({
    url: "url",
    success: function(res) {
    //设置到页面上
    console.log(typeof res);
    }
});
复制代码

jquery的ajax原理也相对差不多，它给开发者处理了非常多的兼容性问题，大大优化了开发者在写ajax造成的代码重复。。。。。。。。。。

转载于:https://juejin.im/post/5cbd306de51d456e2b15f624