JavaScript中的Ajax

一.了解ajax

1.Ajax的概念

	ajax是前后端数据交互的重要手段；
	ajax的全称是：“Asynchronous JavaScript and XML”；

2.同步和异步

	1>生活中的同步和异步，顾名思义，就是同时进行和顺序进行；而程序中的同步和异步，恰巧和生活中的相反；
	2>JavaScript中同步就是：你不执行完上面的代码，那么下面的代码你就别执行；一步一步执行，这就是同步。
	 异步就是可以一起执行的代码；

3.Ajax的介绍

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二.Ajax的写法

var url = "http://localhost/ajax/data/test.txt";
//1.载体xhr对象
var xhr = new XMLHttpRequest();
//2.发起请求,设置请求方式,地址,异步
xhr.open("get",url,true);
//3.通过事件，监听状态
xhr.onreadystatechange = function(){
//				readyState状态:ajax的执行阶段
//				http的状态:xhr.status
if(xhr.readyState == 4 && xhr.status == 200){
					console.log(xhr.responseText);
				}else if(xhr.readyState == 4 && xhr.status != 200){
					console.log(xhr.status);
				};
			}
//4.发送
xhr.send(null);

以上代码就是Ajax的写法，如果我们要使用，只有封装才能随时使用

Ajax的封装

一.Ajax的get封装

document.onclick = function(){
			var url = "http://localhost/1911/ajax/data/test.php";
			ajaxGet(url,function(res){
				console.log(res)
			});
		}
//====================================================================
//以下代码为ajax的get封装
function ajaxGet(url,cb,data){
	data = data || {};
	var str = "";
	for(var i in data){
		str = str + i+"="+data[i]+"&";
	}
	var d = new Date();
	url = url + "?" + str + "__qft="+d.getTime();
	var xhr = new XMLHttpRequest();
	xhr.open("get",url,true);
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			cb(xhr.responseText);
		}
	}
	xhr.send();
}

Ajax的post封装

document.onclick = function(){
			var url = "http://localhost/1911/ajax/data/post.php";
			ajaxPost(url,function(res){
				console.log(res)
			},{
				a:"hello",
				b:"world",
				abc:"hahaha"
			})
		}
//=================================================================
		function ajaxPost(url,cb,data){
			data = data || {};
			var str = "";
			for(var i in data){
				str += `${i}=${data[i]}&`;
			}
			str = str.slice(0,str.length-1);
			var ajax = new XMLHttpRequest();
			ajax.open("post",url,true);
			ajax.onreadystatechange = function(){
				if(ajax.readyState === 4 && ajax.status === 200){
					cb(ajax.responseText);
				}
			}
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			ajax.send(str);
		}