window.unload ajax不执行_Ajax学习

学习主题：AJAX

学习目标：

1 掌握 AJAX访问原理

2 掌握 AJAX 编写步骤

3 掌握AJAX的get和post请求

4 掌握AJAX返回json数据 js处理json数据

ajax介绍&ajax的访问原理

ajax的特点:实现网页的局部刷新。

前景： 搜索框提示语

地图

网页的其他功能

浏览器通过Ajax对象发送请求给服务器，服务器接收到请求做出响应，响应结果不再是直接走的浏览器默认接收响应路径,不再直接解析执行，而是由ajax引擎对象XMLHttpRequest接收响应结果，这个过程是程序员可以控制的,从而可以控制响应的位置，不再是直接覆盖当前页面。

第一个ajax请求

ajax的创建流程：
1.创建ajax对象
  2.声明监听函数
   //判断ajax状态码
    //判断响应状态码
    //处理响应
 3.创建并发送ajax请求
    创建请求（设置请求方式，设置请求地址，设置同步和异步）
  发送请求
//声明用户名校验函数
	function checkUname() {
		//获取用户名信息
		var uname = document.getElementById("uname").value;
		//创建ajax对象
		var ajax;
		if (window.XMLHttpRequest) { //火狐
			ajax = new XMLHttpRequest();
		} else if (window.ActiveXObject) { //IE
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
		}
		//声明监听函数
		ajax.onreadystatechange = function() {
			//判断ajax状态码
			if (ajax.readyState == 4) {
				//判断响应状态码
				if (ajax.status == 200) {
					//获取响应数据(普通字符串或者json字符串)
					var data = ajax.responseText;
					//处理响应数据
					if (eval(data)) {
						//获取span对象
						var span = document.getElementById("s");
						//设置span颜色
						span.style.color = "red";
						//将数据田填充到span中
						span.innerHTML = "用户名已被注册"
					}else{
						//获取span对象
				    var span = document.getElementById("s");
					span.style.color="green";
					span.innerHTML="用户名可用";
					
					}

				}
			}
		}
		//创建并发送请求         
		//创建请求
		ajax.open("get", "data?uname=" + uname);
		//发送请求
		ajax.send(null);
	}

ajax的状态码学习

ajax.readyState

ajax之响应状态码

Ajax的响应状态码：ajax.status200 运行顺利 404 资源未找到 500 服务器内部错误

ajax之异步和同步

异步：当前js函数继续执行，无需等待ajax请求的响应和响应结果的处理。

同步：当前js函数会等待ajax请求及其响应，当ajax响应处理完毕后，继续执行函数的剩余代码。

testAjax和function的执行是没有关系的，testAjax的执行结束，function不一定执行，当响应回来才会触发function的执行。testAjax先于响应的执行。
在testAjax中的一部分依赖响应结果的代码与function就是异步关系。
  为了解决testAjax中依赖响应结果的代码块的执行结果在function没有执行时也要显示内容，采用ajax同步。testAjax是最后执行的，等响应结果function执行完了，达到同步效果。暂停代码执行.

ajax的get请求和ajax的post请求

ajax.open : 创建并发送ajax

创建ajax请求

ajax.open(method,url,ansyc)

Method:表示请求方式

Url:请求地址

Ansyc:设置异步或者同步请求，true表示异步，false表示同步。默认是异步。

ajax的get请求如何附带请求数据。

以问号拼接的形式附带数据，。

ajax.open(“get”,”my?uname=zhangsan&pwd=213”,false);

ajax.send(null);

ajax的post请求如何附带请求数据。

Ajax.send(“键值对数据&键值对数据”)

if ("get" == method.toLowerCase()) {
 ajax.open(method, url + (data == null ? "" : "?" + data), async);
 ajax.send(null);
 } else if ("post" == method.toLowerCase()) {
 ajax.open(method, url);
 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 ajax.send(data);

json数据格式

使用json格式的字符串（良好的格式）

作用：js创建对象的一种格式,保证数据的紧密性和完整性。

格式：

Var 对象名｛

键名：值，

键名：值，

…

｝

eval方法

作用：将json格式的字符串数据直接转变成对应的js对象，便于数据的操作。

使用：Eval(“obj:”+data);

然后在服务器端使用类似gson包的工具包完成json格式的字符串的拼接。

方法：String str=new Gson().toJson(u);

ajax之用户名校验

功能：用户名是否被注册检验

思路：1.用户书写用户名信息，在失去焦点时进行校验

2.失去焦点发送请求到服务器，服务器根据用户名信息去数据库检验该用户名是否存在

3.将校验结果响应浏览器

4.在当前页面，也就是用户名输入框后显示提示语

ajax封装

作用：减轻代码的耦合性和重复性，增加开发效率

封装:相同的保留（固定的代码），不同的传参。

function myajax(method, url, data, deal200, deal404, deal500, async) {
	var ajax;
	if (window.XMLHttpRequest) {
		ajax = new XMLHttpRequest();
	} else if (window.activeXObject) {
		ajax = new activeXObject("Msxml2.XMLHTTP");
	}
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) {
			if (ajax.status == 200) {
				var _data = ajax.responseText;
				if (deal200 != null) {
					deal200(_data);
				}
			} else if (ajax.status == 404) {
				if (deal404 != null) {
					deal404(_data);
				}
			} else if (ajax.status == 500) {
				if (deal500 != null) {
					deal500(_data);
				}
			}
		}

	}
	if ("get" == method.toLowerCase()) {
		ajax.open(method, url + (data == null ? "" : "?" + data), async);
		ajax.send(null);
	} else if ("post" == method.toLowerCase()) {
		ajax.open(method, url);
		ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		ajax.send(data);
	}

}