JavaScript中 Ajax的介绍与实现

166 阅读2分钟

「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战

1. AJAX是什么,如何使用AJAX?

ajax(异步的javascript 和xml) 能够刷新局部网页数据而不是重新加载整个网页。

第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest(); XMLHttpRequest对象用来和服务器交换数据。

第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器;

第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应

第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用;

onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

2. 具体实现

2.1 创建XMLHttpRequest();
var xhr = null;
if (window.XMLHttpRequest) {
  	xhr = new XMLHttpRequest();//标准浏览器
} else {
  	xhr = new ActiveXObject('Microsoft')//IE老版本
 }
2.2 准备发送;
  	// 参数一:请求方式(get获取数据;post提交数据);
	// 参数二:请求地址
  	// 参数三:同步或异步标志位,默认是true表示异步,false表示同步
	// 如果是get请求,那么请求参数必须在url中传递,encodeURI()用来对中文参数
  	var param = 'username='+uname+'&password='+pw;
  	xhr.open('get','./check.php?'+encodeURI(param),true);
2.3 执行发送动作;

2.3.1 get请求

  	xhr.send(null)

2.3.2 post请求

  xhr.setRequestHeader("content-type","application/x-www-form-url-urlencoded");//请求头
  xhr.send(param);//post请求参数在这里传递,并且不需要转码
2.4 指定回调函数;
  	xhr.onreadystatechange=function(){
  		if(xhr.radyState==4){
  			if(xhr.status==200){
  				var data=xhr.responseText;
  				var info=document.getElementById('info');
  				if(data=='1'){
  					info.innerHTML='登录成功';
  				}else if(data=='2'){
  					info.innerHTML='用户名或密码错误';
				}
  			}
  		}
  	}
  }

xhr.readyState状态值含义

  0  xhr对象初始化;
  1  执行发送动作;
  2  服务器端数据已经完全返回;
  3  数据正在解析;
  4  数据解析完成,可以使用了;

xhr.status(部分)状态值含义

200 数据响应正常;
404 没有找到资源;
500 服务器端错误;

3. jquery中使用jsonp,解决跨域请求

$(function(){
	$('#btn').click(function(){
		$.ajax({
			type:'get',
			url:'http://tom.com/jsonp.php',
			dataType:'jsonp',
			jsonp:'cb',//自定义参数名字(callback=abc),指的是等号前面的键,后端根据这个键获取方法名,jquery默认的参数名称是callback
			jsonpCallback:'abc',//自定义参数名字(callback=abc),指的是等号后面的值
			data:{},
			success:function(data){
				console.log(data.username)
			},
			error:function(data){
				console.log('error')
			}
		})
	})
})