Ajax的基本运用

目录

1.什么是Ajax

2.为什么使用Ajax

3.Ajax的常用方法

3.1:open()

3.2:send()

4.Ajax常用属性

4.1:readyState

4.2: onreadystatechange

4.3:responseText

5:代码实战

---

1.什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

2.为什么使用Ajax

ajax主要是实现页面和web服务器之间数据的异步传输。

简单来说，不采用ajax的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。

3.Ajax的常用方法

3.1:open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象

例：

xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);

参数:

a, method:用于指定请求的类型 “GET"或者"POST”

b, url:用于请求的地址, 可相对可绝对

c, asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步

3.2:send()

XMLHttpRequest.send()方法用于实际发出 HTTP 请求

请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

var xhr = new XMLHttpRequest();

var data = ‘name=’ + userVal + ‘&pwd=’ + pwVal;

xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);

/* POST的请求头 */

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

/* 发出HTTP请求 */

xhr.send(data);

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。（send放在最后）

4.Ajax常用属性

4.1:readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态

4.2: onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

另外，如果使用实例的abort()方法，终止 XMLHttpRequest

请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

// 通信成功时，状态值为4

if (xhr.readyState === 4){

if (xhr.status === 200){

console.log(xhr.responseText);

} else {

console.error(xhr.statusText);

}

}};

xhr.open(‘GET’, ‘/endpoint’, true);

xhr.send(null);

4.3:responseText

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据

5:代码实战

function login() {
		var sname = document.getElementById("sname").value;
		alert(sname);
		var xmlhttp;
		try {
			xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
		} catch (e) {
			xmlhttp = new XMLHttpRequest();
			// TODO: handle exception
		}
		xmlhttp.open("post", "Loginservlet?sname="+sname, true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.onreadystatechange = function() {
			//判断请求响应结束
			if (xmlhttp.readyState == 4) {
				//服务器正常
				if (xmlhttp.status == 200) {
					//接收响应的数据
					var str = xmlhttp.responseText;
					alert(str)
					if(str.equals("1")){
						document.getElementById("span").innerHTML="✔";
					}else{
						document.getElementById("span").innerHTML="×";
					}
				}
			}
		}
		xmlhttp.send(null);
	}