AJAX基础入门

Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

 

这是百度的摘录，进入正文。

 

这2天在看Head First，有一本ajax的书，看了看觉得适合新手，图文并茂，生动形象。

 

从这本书我学到了什么呢？他里面一部分在讲ajax 一部分在讲JavaScript结合ajax实现一些表单验证类的，这些东西我就直接跳过了。

 

Ajax最最最主要的api也就是XMLHttpRequest建立请求发送到服务端

 

分为几个步骤：首先得到XMLHttpRequest对象，然后为对象的几个重要属性赋值，分别为

request.open("GET",url,true);

request.onreadystatechange = 函数名

request.send(null);

1.首先就是open，顾名思义开放，需要3个参数，第一个是请求方式，这里先讲“GET”，然后是url，你请求到后台服务器的一个连接地址，比如checkUser.jsp?username = escape(.....);

就是一段get请求就对了，escape是js特别处理参数，防止乱码。然后就是第三个参数boolean值，true代表开启异步请求，反之。（不知道异步的为什么要学ajax，先了解异步去）

 

2.然后就是onreadystatechange指定一个函数，就是一个回调函数，这里下面重点讲

 

3.最后就是send的了，一般get请求send都是传个null，它在post请求下比较常用

 

这里插入一个知识点，ajax异步请求服务器，服务器会分阶段告诉浏览器处理结果，一般分为4个阶段，每个阶段都会调用onreadystatechange的方法，所有在下面处理服务器返回结果是应该注意。

 

Ajax请求服务器返回四个阶段：

0 － （未初始化）还没有调用send()方法 
1 － （载入）已调用send()方法，正在发送请求 
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 
3 － （交互）正在解析响应内容 
4 － （完成）响应内容解析完成，可以在客户端调用了 

 

百度上查找的资料说有5个阶段，但是我认为0阶段还未涉及要服务器交互所以不说。

 

那么我们就要通过判断阶段来分别处理回调函数。

 

这里有一小段代码

if(request.readyState==4){

if(request.status==200){

....

}

}

这段代码我放在回调函数里，判断当处理阶段达到4时候才进行交互，并且要判断服务器返回状态是否为200，至于状态码自行百度。

不信有这几个阶段的朋友可以在第一个if里加一个alert语句去判断一下QAQ。。。。

 

然后ajax基本就完了。还有就是一个post请求。

那么post请求要怎么写呢？

1.request.open("GET",url,true); 把第一个参数改为POST

2.把url直接的参数改为直接一个地址就行不要带参数，比如上面的改为checkUser.jsp

3.然后要自己拼装一个参数

比如：var requestParam = “username=’+escsap(username) +”&password=”+escape(password);

4.然后把数据放在send里send（requestParam）;

5.然后要为post请求提交一个header数据  content-type你发送什么数据就设置什么数据。setRequestHeader（"Content-Type","

application/x-www-form-urlencoded"）

然后没了。

 

接下来讲一下request接收回来的数据类型

 

Responsetext responseXML 一般就是服务端直接返回一段文本，或者返回xml，现在更流行json

 

在js里利用JSON.parse（object）解析JSON。不过书里写的是利用eval方法去计算得到对象。eval（"("+responseText+")"）;

在服务端怎么返回json，以java为例，需要第三方jar包支持

 

那么在js中又如何使用json数据呢

 

For(var obj in object){

Alert(object[obj]);

}

 

obj是json对象里的属性名字，通过访问object[obj]得到属性值，那么如何访问是数组的属性值，head first里有一段代码提供，我自己也没去测试，这里贴一下

 

function isArray(obj){
    if(typeof obj =="object"){
        var criteria  = obj.constructor.toString().match(/array/i);
        return (criteria!=null)
    }
    return false;
}

然后这里是ajax适配浏览器的代码，看看就行 现在好多框架工具包都有优化，比如jquery

 

function  createRequest(){
	var request;
	try{
		request =  new XMLHttpRequest();
	}catch(ex1){
		try{
			request =  new ActiveXObject("Msxml2.XMLHttp");	
		}catch(ex2){
			try{
				request =  new ActiveXObject("Microsoft.XMLHttp");
			}catch(ex3){
				request = null;
			}
		}
	}
	return request;
}

下面是我springmvc写的一个方法测试ajax的。

@RequestMapping("check")
	public void check(@RequestParam("username") String id,
			HttpServletResponse response) throws IOException {
		//Map
  
    map = new HashMap
   
    ();
		String msg = "";
		if (d.check(id))
			//map.put("msg", "用户名可以使用");
			msg = "用户名可以使用";
		else
			//map.put("msg", "用户名已经被注册");
			msg = "用户名已经被注册";
		try {
			// 设置页面不缓存
			response.setContentType("application/json");
			response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setCharacterEncoding("UTF-8");
			PrintWriter out = null;
			out = response.getWriter();
			JSONObject jsonObject = JSONObject.fromObject(msg);
			out.print(jsonObject);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}