AJAX学习

AJAX：异步的javascript和xml

 

实现AJAX的XMLHttpRequest对象

open(method, url, async)：规定请求类型、url、异步还是同步

• method：发送请求的方法
• URL：请求的地址
• async：true为异步，false为同步，默认为true

send(string)：把请求发送到服务器

• string：GET无主体，参数拼接到URL上，可不填或填null；POST无参数时可不填，有参数时传入拼接后的字符串

var request = new XMLHttpRequest();

// GET方法
request.open("GET", "get.php", true);
request.send(); // 或request.send(null);

// POST方法，不带参数
request.open("POST", "post.php", true);
request.send(); // 不含数据时可不填


// POST方法，提交表单
request.open("POST", "create.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 因为我们要提交一个表单，所以要设置http请求类型
request.send("name=王二狗&sex=男");

 

获取服务器响应

• responseText：获得字符串形式的响应数据
• responseXML：获得XML形式的响应数据
• status和statusText：以数字和文本的形式返回HTTP状态码
• getAllResponseHeader()：获取所有的响应报头
• getResponseHeader()：查询响应中的某个字段的值

 

readyState属性：代表服务器响应的变化

• 0：请求未初始化，open未调用
• 1：服务器连接已建立，open已经调用
• 2：请求已接收，接收到头信息
• 3：请求处理中，接收到响应主体
• 4：请求已经完成，响应已经完成了

// 发送ajax请求
var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();

// 用onreadystatechange方法来监听readyState属性，获取服务器处理请求的状态
request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        // 响应成功并且正确，处理request.responseText的响应内容
    }
}

 

jQuery实现AJAX：

jQuery.ajax([settings])

• type: 默认为：“GET"
• url:
• data: 一个对象，随请求发送到服务器
• dataType: 预期服务器返回的数据类型，一般设置为json
• success:请求成功后的回调函数， 传入返回后的数据，以及包含成功代码的字符串

error:请求失败后的回调函数，传入XMLHttpRequest对象

// jQuery GET示例
$("#search").click(function() {
	$.ajax({
		type: "GET",
		url: "service.php?number=" + $("#keyword").val(),
		dataType: "json",
		success: function(data) {
			if (data.success) {
				$("#searchResult").html(data.msg);
			} else {
				$("#searchResult").html("出现错误: " + data.msg);
			}
		},
		error: function(jqXHR) {
			alert('发生错误: ' + jqXHR.status);
		}
	})
});

// jQuery POST示例
$("#create").click(function() {
	$.ajax({
		type: "POST",
		url: "service.php",
		dataType: "json",
		data: {
			name: $("#staffName").val(),
			number: $("#staffNumber").val(),
			sex: $("#staffSex").val(),
			job: $("#staffJob").val()
		},
		success: function(data) {
			if (data.success) {
				$("#createResult").html(data.msg);
			} else {
				$("#createResult").html("出现错误: " + data.msg);
			}
		},
		error: function(jqXHR) {
			alert('发生错误: ' + jqXHR.status);
		}
	})
});

 

跨域

• 一个域名地址的组成： http://       www     .      abc.com  :  8080        /   scripts/jquery.js
•                                      协议         子域名        主域名        端口号          请求资源地址
• 当协议、子域名、主域名、端口号之中任意一个不相同，即为不同域
• 如：
  • http://www.abc.com/index.html 与 http://www.abc.com/serive.php（非跨域）
  • http://www.abc.com/index.html 与 http://www.efg.com/index.html（跨域,主域名不同）
  • http://www.abc.com/index.html 与 http://bbs.abc.com/index.html（跨域：子域名不同）
  • http://www.abc.com/index.html 与 http://www.abc.com:81/index.html（跨域：端口号不同）
  • http://www.abc.com/index.html 与 https://www.abc.com/index.html（跨域：协议不同）
  • 特殊的：http://localhost/  与  http://127.0.0.1/ （跨域）
• 不同域之间的相互请求资源，称为”跨域请求“

 

JavaScript同源策略：

禁止跨域调用其他页面的对象

 

处理跨域的方法：

1、后台代理

通过在相同域名的web服务器创建一个代理：

• 广州服务器：（www.guangzhou.com）
• 上海服务器：（www.shanghai.com）

在前端通过调用 www.guangzhou.com/proxy-shanghaiservice.php 来调用上海服务器(www.shanghai.com/service.php)，再把相应结果返回给前端，处理跨域访问的限制。

2、JSONP（只支持GET）

解决主流浏览器的跨域访问的问题

在www.aaa.com的页面中，声明一个方法

<script>
// 声明方法
function jsonp(json) {
  alert(json["name"]);
}

//在下面通过script标签来跨域获取资源 
</script>

<script src="http://www.bbb.com/jsonp.js></script>

在www.bbb.com中：

jsonp({'name':'小王', 'age': 24});

 3、HTML5 XHR2

在服务端添加两行php代码：

//service.php

header("Access-Control-Allow-Origin: *");  // 所有域名都可访问本服务器,可填写某一个域名
header("Access-Control-Allow-Methods: POST,GET");  // 本服务器支持跨域访问的方法

 

主域名：abc.com

子域名：

• www.abc.com
• bbs.abc.com
• ...