XMLHttpRequest 和 ajax

了解什么是ajax

ajax 即 Asynchronous Javascript And XML（异步JavaScript和XML）

ajax是一项创建动态网页的技术，可以快速创建动态网页

ajax 是一门实现数据前后端交互的技术

ajax可以实现不跳转刷新页面（局部刷新页面），异步请求

ajax是依赖浏览器提供的 XMLHttpRequest对象，通过XMLHttpRequest对象使得浏览器可以发出HTTP请求与接收HTTP响应。

使用原生XMLHttpRequest对象

XMLHttpRequest的get请求方式

var xhr = new XMLHttpRequest();                 // 1、创建XMLHttpRequest对象实例 
xhr.open('get','https://suggest.taobao.com/sug?&q=yifu',true);   // 2、发起请求,地址有参数的话需要在url后面拼接参数    
xhr.send();                                     // 3、发送请求主体
			        
xhr.onreadystatechange = function(){            // 4、监听请求和响应的状态(绑定事件)                                   
	if(xhr.readyState == 4){                    // 5、是否请求完成
		if(xhr.status == 200){                  // 6、是否响应成功
			var txt = xhr.responseText;         // 7、记录响应的结果（响应报文）
			console.log(txt);                   //    打印txt  
			var arr = JSON.parse(txt);          // 8、这里获取到的内容是字符串，需要把json格式字符串转json对象（解析json格式字符串）
			console.log(arr);                   //    打印arr  （可以自己对比一下txt与arr的区别）   
		}
	}
}
    

XMLHttpRequest的post请求方式 

var xhr = new XMLHttpRequest();                 // 1、创建XMLHttpRequest对象实例 
xhr.open('post','https://suggest.taobao.com/sug',true);   // 2、发起请求,地址有参数的话需要在url后面拼接参数   
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')   // 3、设置请求头
xhr.send("?&q=yifu");                           // 4、发送请求主体（post请求参数放在send这里）
			   			        
xhr.onreadystatechange = function(){            // 5、监听请求和响应的状态(绑定事件)                                   
	if(xhr.readyState == 4){                    // 6、是否请求完成
		if(xhr.status == 200){                  // 7、是否响应成功
			var txt = xhr.responseText;         // 8、记录响应的结果（响应报文）
			console.log(txt);                   //    打印txt  
			var arr = JSON.parse(txt);          // 9、这里获取到的内容是字符串，需要把json格式字符串转json对象（解析json格式字符串）
			console.log(arr);                   //    打印arr  （可以自己对比一下txt与arr的区别）   
		}
	}
}

调用ajax

使用jquery 的 ajax（别人封装好的）

jquery是什么? 是js库    

jquery有个叫做ajax的函数，这个函数是实现数据前后端交互的函数，是实现Ajax这项技术的函数   

调用ajax函数    

调用者：$     

参数：对象     

返回值：忽略   

功能：可以向指定的数据地址发起请求，然后接收服务端响应的数据（数据前后端交互）

// 调用ajax函数
        $.ajax({     
			url: "",       // 数据地址（请求地址）
			type: "",      // 请求方式 （get或者post）
            data: {        // （需要阅读接口文档，需填写参数时在此处书写）
                   
                },
            beforeSend: function () {
                console.log("发起请求之前在控制台打印");
                },
			success: function(res) {        // 请求完成并且响应成功执行的回调函数
				var arr = JSON.parse(res);  // 把json格式的字符串处理成json对象
                console.log("请求成功时在控制台打印");
			    },
			error: function(err) {          //请求失败
				console.log("请求失败时在控制台打印");

				// 什么情况下会执行该回调函数?
				// 1. url地址写错，或者其他参数写错
				// 2. 后台发生异常
				// 3. 如果不是跨域的地址，就是打开方式错误
			    }
            complete: function () {
                 console.log("请求完成时在控制台打印");
                }
			})