ajax入门

//1. 创建请求对象
var xhr=new  XMLHttpRequest();
//2. 注册状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);

}
}
//基于xhr对象获取的通讯状态,对响应数据进行处理
//readyState状态说明
//0 :未初始化，尚未调用open()方法
//1 :启动。已经调用open() 方法1但尚未调用send()方法
//2 :发送。已经调用send()方法，但尚未接收到响应
//3 :接收。已经接收到部分响应
//4 :完成。已经接收到全部响应数据，而且已经可以在客户端使用了


//3. 初始化连接
xhr.open("GET","https://www.baidu.com",true);//true表示异步(底层会启动线程与服务端通讯)

//4. 发送请求
xhr.send();

基于jquery的ajax
官网
https://api.jquery.com/jQuery.ajax/

$.get( "url", { name: "John", time: "2pm" },function(data){
    alert( "Data Loaded: " + data );
  });

$.post( "url", { name: "John", time: "2pm" },function(data){
    alert( "Data Loaded: " + data );
  });

$.ajax({
   
  method: "GET",
  url: "test.js",
   data: {id: 123},
  dataType: "script"
   success：function（）{
}
});

ajax框架-----练手

(function(){
	var ajax = function(){};
	ajax.prototype={
		doGet: function(url,params,callback){
			//1.创建xhr对象
			var xhr=new  XMLHttpRequest();
			//2. 注册状态监听
			xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
			callback(xhr.responseText);
			}
			}
			//基于xhr对象获取的通讯状态,对响应数据进行处理
			//readyState状态说明
			//0 :未初始化，尚未调用open()方法
			//1 :启动。已经调用open() 方法1但尚未调用send()方法
			//2 :发送。已经调用send()方法，但尚未接收到响应
			//3 :接收。已经接收到部分响应
			//4 :完成。已经接收到全部响应数据，而且已经可以在客户端使用了


			//3. 初始化连接
			xhr.open("GET",url+"?"+params,true);//true表示异步(底层会启动线程与服务端通讯)
			//4. 发送请求
			xhr.send();
		}	,
		doPost: function(url,params,callback){
			//1.创建xhr对象
			var xhr=new  XMLHttpRequest();
			//2. 注册状态监听
			xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
			callback(xhr.responseText);
			}
			}
			//基于xhr对象获取的通讯状态,对响应数据进行处理
			//readyState状态说明
			//0 :未初始化，尚未调用open()方法
			//1 :启动。已经调用open() 方法1但尚未调用send()方法
			//2 :发送。已经调用send()方法，但尚未接收到响应
			//3 :接收。已经接收到部分响应
			//4 :完成。已经接收到全部响应数据，而且已经可以在客户端使用了


			//3. 初始化连接
			xhr.open("POST",url+"?"+params,true);//true表示异步(底层会启动线程与服务端通讯)
			//4. 发送请求
			xhr.send();
		}
			
	}
	window Ajax= new ajax();
	
})();

使用时

Ajax.doGet("url","params",function(data){


});