认识 AJAX 请求 访问 数据

AJAX

一、什么是Ajax?

利用ajax技术,通过前后端数据交互,从而改变页面内容同时页面不用刷新,提高了用户体验

二、Ajax的运行

AJAX必须依赖服务执行,即使用http/https协议来运行。

三、创建Ajax核心对象

// W3C标准:
var xhr = new XMLHttpRequest();
// IE标准: 
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

// 兼容处理
var xhr;
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
} else {
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

四、建立连接

// 语法:
xhr.open(type, url, true);

open() 方法中:

  • 第1个参数指请求的发送方式,值为get或post。
  • 第2个参数指请求的url路径。
  • 第3个参数指请求是异步还是同步,如果写true表示异步(默认true),写false表示同步。

五、发送请求

// 语法:
xhr.send();

如果是get方式发送请求,send()命令中不用写任何参数

如果是post方式发送请求,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

六、接收响应

// 就绪状态变化的事件函数
xhr.onreadystatechange = function(){
	// 如果就绪状态为 4 , 即:请求已完成,且响应已就绪
	// status 状态码为 200  即: “OK” 
	if(xhr.readyState == 4 && xhr.status == 200){
		// 一般用 responseText 获取后端传回的数据
		alert(xhr.responseText);
	}
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页