`
java--hhf
  • 浏览: 308703 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

AJAX入门教程

阅读更多

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

    言归正传。

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

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

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

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

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

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

    首先把握住处理思路,

  1. 触发网络请求事件 onclick="loadXMLDoc()"
  2. 创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest();
  3. 发动请求 xmlhttp.open("POST",URL,true);
  4. 执行其他无关事宜
  5. 处理请求的返回结果 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包以方便读者使用)

0
0
分享到:
评论
2 楼 java--hhf 2015-03-20  
somefuture 写道
Access-Control-Allow-Origin并不是允许异步请求,而是允许跨域请求。没有这一句在同域中的异步请求依然可以。

细心的1楼发现了我的本意 是否异步请求的开关在xmlhttp.open("GET",url,true);的第三个参数 十分感谢
1 楼 somefuture 2015-03-19  
Access-Control-Allow-Origin并不是允许异步请求,而是允许跨域请求。没有这一句在同域中的异步请求依然可以。

相关推荐

    ajax 基础教程

    ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    csdn 图书 Ajax基础教程.chm

    《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...

    AJAX基础教程

    **AJAX基础教程** 在Web开发领域,AJAX(Asynchronous JavaScript and XML)是一种不可或缺的技术,它使得网页可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本教程将带您深入理解AJAX的基本...

    Ajax基础教程(扫描版)

    原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...

    Ajax 基础教程中文版.pdf

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版",你可以深入了解Ajax的工作原理,学会如何在实践中运用它。

    AJAX基础教程.pdf

    ### AJAX基础教程知识点总结 #### 一、AJAX概述 - **定义**:Asynchronous JavaScript and XML(异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **目的**:提高Web应用的...

    Ajax基础教程

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术在现代Web开发中被广泛应用,极大地提升了用户体验,因为它允许页面在后台与服务器...

    ajax基础教程(pdf)(三)

    ajax基础教程(pdf)完整版本,希望对大家有所帮助

    Ajax基础教程(亚马逊计算机榜首图书,国内第1本Ajax图书) [第一部分 共两部分]

    本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和...

    ajax基础教程和ajax从入门到精通

    **Ajax基础教程** Ajax(Asynchronous ...通过阅读《Ajax从入门到精通.pdf》和《ajax基础教程.pdf》,你可以系统地学习Ajax的各个方面,从基础知识到进阶技巧,逐步提升自己的技能,成为一名精通Ajax的开发者。

    ajax入门教程PDF

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个...通过阅读这份"ajax入门教程PDF",初学者将能够快速理解Ajax的工作方式,掌握基本的Ajax编程技能,从而在实际项目中提升网页的交互性和动态性。

    Ajax基础教程中文版及源代码 part1

    堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...

    Ajax程序经典小例子,《Ajax入门教程》代码

    在《Ajax入门教程》中,可能包含了一系列经典的小例子,比如: 1. **实时搜索建议**:用户在输入框中输入字符时,利用Ajax动态向服务器发送请求,获取匹配的搜索建议,并即时显示在下拉框中。 2. **无刷新分页**:...

    Ajax基础教程中文版及源代码.part3.rar

    ajax入门推荐书籍.书中讲解了ajax出现得背景,绝对最好的入门书籍,尤其是把最先进的ajax开发方式介绍给大家 压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程...

    Ajax基础教程中文版及源代码.part5.rar

    书中讲解了ajax出现得背景,绝对最好的入门书籍,尤其是把最先进的ajax开发方式介绍给大家 压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源...

    Ajax基础教程中文版及源代码.part4.rar

    书中讲解了ajax出现得背景,绝对最好的入门书籍,尤其是把最先进的ajax开发方式介绍给大家 压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源...

    Ajax基础教程中文版及源代码.part1.rar

    书中讲解了ajax出现得背景,绝对最好的入门书籍,尤其是把最先进的ajax开发方式介绍给大家 压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源...

    Ajax基础教程中文版及源代码.part2.rar

    书中讲解了ajax出现得背景,绝对最好的入门书籍,尤其是把最先进的ajax开发方式介绍给大家 压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源...

Global site tag (gtag.js) - Google Analytics