js封装原生态的ajax

原创已于 2025-03-05 13:43:10 修改 · 570 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

于 2017-03-31 15:37:50 首次发布

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用JavaScript原生实现AJAX请求的方法，包括创建XMLHttpRequest对象、设置请求方式、发送请求及处理响应数据的过程。提供了完整的代码示例，帮助读者理解AJAX的工作原理。

js原生ajax

ajax：一种请求数据的方式，不需要刷新整个页面；
ajax的技术核心是 XMLHttpRequest 对象；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

代码如下：

//调用ajax方法
ajax({
	    url: "wshlfx.com",              //请求地址
        type: "POST",                       //请求方式
        data: { name: "super", age: 20 },        //请求参数
        dataType: "json",
        success:function(response, xml){//请求成功方法
            // 此处放成功后执行的代码
        },fail:function(status){//请求失败方法,status表示状态
	        // 此处放失败后执行的代码
		}
    });


//================下面封装 ajax方法 =========================

    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);
		
		var xhr;
        //第一步
		if(window.ActiveXObject){//返回true为ie浏览器内核,否则不是ie内核
			//为ie内核创建传输对象的方式 
			xhr=new window.ActiveXObject("Microsoft.XMLHTTP"); 
		 }else{
			//为非ie 内核浏览器创建传输对象的方式
			xhr=  new  XMLHttpRequest();
		 }

        //接收 - 第三步
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var status = xhr.status;
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML);
                } else {
                    options.fail && options.fail(status);
                }
            }
        }

        //连接 和 发送 - 第二步
        if (options.type == "GET") {
            xhr.open("GET", options.url + "?" + params, true);
            xhr.send(null);
        } else if (options.type == "POST") {
            xhr.open("POST", options.url, true);
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }
    
    //格式化参数
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
        }
        arr.push(("v=" + Math.random()).replace(".",""));
		return arr.join("&");
	 }