欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

认识 AJAX 请求 访问 数据

程序员文章站 2022-03-07 12:44:12
AJAX一、什么是Ajax?利用ajax技术,通过前后端数据交互,从而改变页面内容同时页面不用刷新,提高了用户体验二、Ajax的运行AJAX必须依赖服务执行,即使用http/https协议来运行。三、创建Ajax核心对象// W3C标准:var xhr = new XMLHttpRequest();// IE标准: var xhr = new ActiveXObject("Microsoft.XMLHTTP");// 兼容处理var xhr;if(window.XMLHttpReq...

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);
	}
}

本文地址:https://blog.csdn.net/hs1219462412/article/details/114002230

相关标签: javascript