ajax的自己简单封装和jq中的ajax

下面的是自己简单封装的ajax方法：

	function ajax({method = 'get', url, data, success, error}){
		var xhr = null;
		try{
			xhr = new XMLHttpRequest();   //非IE浏览器创建xhr对象
		}catch(error){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");    //IE创建xhr对象
		}
		//此时readyState=0
		//1、判断method是否是get，和data是否存在
		if(method == "get" && data){
			url += "?" + data + "&" + new Date().getTime();
		}
		
		xhr.open(method, url, true);    //初始化http请求，执行后readyState=1

		//2、发送http请求，执行后readyState=2
		if(method == "get"){
			xhr.send();
		}else{
			//设置post提交的格式
			xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); 
			xhr.send(data);
		}
        
        //readyState改变时触发事件句柄，readyState=3时：所有响应头部都已经接收到。响应体开始接收但未完成。
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){    //readyState=4：HTTP:响应已经完全接收。
				if(xhr.status == 200){
					//下载到了数据，调用回调函数来处理接收到的数据
					if(success){
						success(xhr.responseText);
					}
				}else{
					if(error){
						error("Error:" + xhr.status);
					}
				}
			}
		}
	}

使用的时候直接调用然后加入参数。

ajax({
    method: 'get',
    data: '',
    url: 'test.html',
    success: function(data){
        conole.log(data);
    },
    error: function(msg){
        console.log(msg);
    }
});

输出结果：
ajax的自己简单封装和jq中的ajax

简单使用jQuery中封装的ajax方法

jQuery中的ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$ .ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
jq中的ajax使用比自己封装的要功能多，使用起来也更简单。
$.ajax([setting]); setting里面的参数是可选的，下面为一些常用的参数。

$.ajax({
    async: 'true/false'                            //默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，此选项设置为 false
    type: 'POST/GET',                              //请求方式"POST" 或 "GET"， 默认为 "GET"
    url： '',                                      //默认值:为当前页地址。发送请求的地址
    data: '',                                      //发送到服务器的数据,将自动转换为请求字符串格式
    dataType: 'xml/html/script/json/jsonp/text',   //预期服务器返回的数据类型。如果不指定，jQuery 将自动智能判断
    complete: function(XHR, TS){},               //请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
    success: function(data){},                     //请求成功后的回调函数
    error: function(msg){}                         //请求失败时调用此函数
});

参数中的datatype的值的详细说明：
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

ajax的自己简单封装和jq中的ajax

简单使用jQuery中封装的ajax方法

相关推荐