AJAX入门教程

原创已于 2022-11-21 22:29:17 修改 · 296 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #异步请求 #局部更新 #json

于 2015-03-19 16:04:59 首次发布

Java 专栏收录该内容

33 篇文章

订阅专栏

果然还是花了点时间来看下AJAX的异步请求操作了，下面的介绍主要是针对AJAX小白，大牛悄悄的飘过。

言归正传。

AJAX的全称是Asynchronous JavaScript and XML翻译过来是异步的JavaScript 和XML。含蓄的引用W3C的介绍

AJAX不是新的编程语言，而是一种使用现有标准的新方法

好吧，虽然我也没有看懂是啥意思，只不过提高下博客的LEVEL来着。

我理解中AJAX有两大特性 —— 异步提交①，局部更新②。前者指的是在执行网页请求的时候我们还可以继续运行请求后面的代码，不至于停在当前等待返回值，当然会有专门的函数来等待请求的结果和结果处理；后者指的是可以局部更新网页中的一个组件而不是整个网页，减少不必要的时间和数据的让费，这很好理解。

举个反例说，以前我们在form表格提交中用GET或者POST方法来请求servlet，servlet会去查询数据库数据，然后得到数据后跳转到结果页面，这是个串行的过程①，此时用户正在等待新页面的跳转，时间慢的话显得很不友好，新页面中除了加载改变的数据还得加载未变动的数据②，增加了不必要的带宽。

有了基本的概念以后，下面要介绍怎么用了：

首先把握住处理思路，

触发网络请求事件 οnclick="loadXMLDoc()"
创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest();
发动请求 xmlhttp.open("POST",URL,true);
执行其他无关事宜
处理请求的返回结果 xmlhttp.onreadystatechange=function(){}

来一个helloworld实例

<html>
<head>
	<script type="text/javascript">
		function loadXMLDoc(){
			// alert('start');
			var xmlhttp;
			if (window.XMLHttpRequest){
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			}else{
				// code for IE6, IE5
			  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
  				if (xmlhttp.readyState==4 && xmlhttp.status==200){
    				document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    				console.log("log:  "+xmlhttp.responseText);//输出到浏览器控制台
    			}
  			}
			xmlhttp.open("GET","http://localhost:8080/ajax/data?name=hhf&&age=20",false);
			xmlhttp.send();
			// console.log("log:  "+xmlhttp.responseText);

			xmlhttp.open("POST","http://localhost:8080/ajax/data?name=hhf&&age=20",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send("name=Bill&age=young");
						
			// alert('end');
		}
	</script>
</head>
<body>
	<div id="myDiv"><h3>Let AJAX change this text</h3></div>
	<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

在搞上javaEE中的servlet内容

package com.hhf.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class AjaxDataServlet extends HttpServlet {

	private static final long serialVersionUID = -8233748533793941058L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("get -->  "+getServletContext().getRealPath("/WEB-INF/classes"));
		JSONObject resultJson = new JSONObject();
		String status = "error";
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println(name+", "+age);

    	JSONArray keyArr = new JSONArray();
    	JSONArray valArr = new JSONArray();
    	keyArr.add(name);
    	keyArr.add(age);
    	valArr.add(age);
    	valArr.add(name);
    	
    	resultJson.put("function", "GET");
        resultJson.put("key", keyArr);
        resultJson.put("val", valArr);
        if (resultJson.get("key").toString().length()>0) {
			status="success";
		}
        resultJson.put("status", status);
		
        response.getOutputStream().write(resultJson.toString().getBytes("UTF-8"));
        response.addHeader("Access-Control-Allow-Origin", "*");//允许跨域请求
		response.setContentType("text/json;charset=UTF-8");
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		System.out.println("post -->  "+getServletContext().getRealPath("/WEB-INF/classes"));
		JSONObject resultJson = new JSONObject();
		String status = "error";
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println(name+", "+age);

    	JSONArray keyArr = new JSONArray();
    	JSONArray valArr = new JSONArray();
    	keyArr.add(name);
    	keyArr.add(age);
    	valArr.add(age);
    	valArr.add(name);
    	
    	resultJson.put("function", "POST");
        resultJson.put("key", keyArr);
        resultJson.put("val", valArr);
        if (resultJson.get("key").toString().length()>0) {
			status="success";
		}
        resultJson.put("status", status);
		
        response.getOutputStream().write(resultJson.toString().getBytes("UTF-8"));
        response.addHeader("Access-Control-Allow-Origin", "*");//允许跨域请求
		response.setContentType("text/json;charset=UTF-8");
	}
}

当时遇到的一个问题是，浏览器报错没有获得跨域请求返回数据的权限，加上下面这句就好了

response.addHeader("Access-Control-Allow-Origin", "*");//允许跨域请求

一个完整的AJAX请求已经完成。

如果有在网页中会触发很多个AJAX请求，则建议调整AJAX的请求格式

<html>
<head>
	<script type="text/javascript">
		
		var xmlhttp;
		function loadXMLDoc(url,cfunc){
			if (window.XMLHttpRequest){
				// code for IE7+, Firefox, Chrome, Opera, Safari
  				xmlhttp=new XMLHttpRequest();
  			}else{
  				// code for IE6, IE5
  				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  			}
			xmlhttp.onreadystatechange=cfunc;
			xmlhttp.open("GET",url,true);
			xmlhttp.send();
		}
	
		function myFunction(){
			// alert('start');
			loadXMLDoc("http://localhost:8080/Highcharts/data?name=hhf&&age=20",function(){
  				if (xmlhttp.readyState==4 && xmlhttp.status==200){
    				document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    			}
  			});
  			//alert('end ');		
  		}
}
	</script>
</head>
<body>
	<div id="myDiv"><h3>Let AJAX change this text</h3></div>
	<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>

OVER，也不是很复杂吧。

    
    每天都要多一点自己独处的时间，

（PS，上面的代码中用到JSON数据格式，附件中提供了JSON的jar包以方便读者使用）