小天带你了解ajax

Ajax (asynchronous javascript and xml)

  在没有ajax的时候,页面每次提交数据都必须销毁当前的页面,重新从服务器端获得一个页面。这样做不仅影响用户体验,而且会导致流量的浪费(都是钱啊)。为了避免这种情况,google在2005年通过其Goggle Suggest使AJAX变得流行起来。

(1)ajax的定义

  在小天看来,ajax的本质就是利用浏览器提供的一个特殊的对象:XMLHttpRequest对象,也可以称为AJAX对象,向服务器发送异步请求。服务器返回部分数据(通常不需要返回完整页面),这样的话,用户的操作就不会被打断,也就避免了多余流量的浪费。

(2)获取ajax对象

  首先,既然要利用XMLHttpRequest对象,当然要获取这个对象。但是,由于IE的一些黑历史,仗着自己当年的市场占有率高,就是莽 rua!它的ajax对象叫ActiveXObject。要区分浏览器来获取这个对象。但是jquery等js框架已经将这一步集成了。现在很难想象有人写js会不用jquery。所以这里只是大致了解一下就好了。辣鸡IE。壮哉我大chrome。

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}

  

  很难想象当年的IE有多大的勇气才敢逆时代前进。这样不兼容的例子真的很多很多,导致开发者都想放弃IE,更不用说用户了。
  弱小和无知不是生存的障碍,傲慢才是。

(3)ajax对象的几个重要的属性

  a.onreadystatechange:用来绑定一个事件处理函数,用来处理readystatechange事件。
  注:当ajax对象的readyState属性值发生了任何改变(比如从0变成了1),就会产生readystatechange事件
  b.readyState:有五个值(0,1,2,3,4),表示ajax对象与服务器通信的状态。其中,当值为4时,表示AJAX对象已经获得了服务器返回的所有数据。
  哈哈,小天觉得,记住4就够啦。其他的不太懂。
  c.responseText:获得服务器返回的文本数据。
  d.responseXML:获得服务器返回的XML数据。
  e.status:获得状态码。(比如说200表示成功,404啥的。。500啥的。。不想碰到啊 又想到了被抢课支配的恐惧)

(4)编程步骤

  step1.获得ajax对象。(参见(2))
  step2.发送请求。
  有两种请求get或者post请求,其中区别优劣小天就不赘述了。
  情形一 发送get请求
  a.调用ajax对象的open方法
  xhr.open(请求类型,请求地址,同步/异步(true表示异步));
  ps: ajax也可以发送同步请求,通俗的说,就是浏览器会锁定这个页面,用户感觉不到这个页面的刷新,但是在服务器做出响应之前,根本不可以对页面做出任何的操作。现在已经很少用ajax做同步处理了。拿一个异步的东西做同步,那不是傻吗。( ▼-▼ )。
  eg:
    xhr.open(‘get‘,‘check_uname.do?name=tom‘,true);
  b.绑定事件处理函数
  xhr.onreadystatechange=函数名;
  eg:
  xhr.onreadystatechange=f1;
  c.发送请求
  xhr.send(null);

  情形二 发送post请求
  a.xhr.open(‘post‘,‘请求地址‘,true);
  b.xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
  c.xhr.onreadystatechange=函数名;
  d.xhr.send(‘name=tom‘);
  
  注:b步骤 按照http协议规范,如果发送的是post请求,在请求数据包里面,应该有content-type消息头。默认情况下,ajax对象不带消息头,所以需要调setRequestHeader方法来设置这个消息头。

  step3.编写服务器端的程序
  serlvet的话 就是通过PrintWriter来返回文本数据就可以了。也可以使用json
  至于SpringMVC和ajax的结合,会单开一篇随笔。

  step4.编写事件处理函数

function f1(){
	//先获得服务器返回的数据
	if(xhr.status == 200 && xhr.readyState == 4){
		var txt = xhr.responseText;
		//利用这些数据(txt)更新页面
		...
	}
}

  

(5)实战:注册页面(get请求)

  这个算是非常经典的AJAX的案例了。
  需求就是:当用户输入用户名之后,判断用户名是否为Sally,如果是,那么文本框之后出现提示用户名已存在,如果不是Sally提示可以使用。

  在写的时候,小天发现自己的jquery和javascript已经忘得差不多了( ╯□╰ ),不过还是勉强完成了。之后看来需要复习一下了。这个小案例没有使用jquery,但是对javascript一些很复杂的语法进行了封装。

  

//js工具类
function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}
//有种自己编写了jquery的感觉( ▼-▼ )
function $(id){
	return document.getElementById(id);
}

function $F(id){
	return $(id).value;
}

//jsp页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>regist</title>
<script type="text/javascript" src="js/ajax.js">
</script>
<script type="text/javascript">
	function check(){
		var xhr = getXhr();
		xhr.open(‘get‘,‘check.do?uname=‘+ $F(‘uname‘),true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 &&
					xhr.status == 200){
				//获得服务器返回的数据
				var txt = xhr.responseText;

				$(‘uname_msg‘).innerHTML = txt;
			}
		};

		xhr.send(null);
	}
</script>
</head>
<body style="font-size:30px;">
	 <form action="" method="get">
	 	<fieldset>
	 		<legend>注册</legend>
	 		用户名:<input id="uname" type="text" name="uname" onblur="check();" />
	 		<span id= "uname_msg"></span><br/>
	 		密码:<input type="password" name="pwd"/><br/>
	 		<input type="submit" value="注册"/>
	 	</fieldset>
	 </form>
</body>
</html>

//servlet页面
public class ActionServlet extends
	HttpServlet{
	public void service(
			HttpServletRequest request,
			HttpServletResponse response)
	throws ServletException,IOException{
		System.out.println("service()");
		//获得请求资源路径
		// http://ip:port/ajax-day01/check.do
		String action = request.getServletPath();
		//设置编码类型。
		response.setContentType(
				"text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		//依据分析的结果,进行不同的处理
		if("/check.do".equals(action)){
			String uname =
				request.getParameter(
						"uname");
			System.out.println("uname:"
						+ uname);
			if("Sally".equals(uname)){
				out.println("帐号已经存在(╯-_-)╯╧╧");
			}else{
				out.println("可以使用( ?? ω ?? )y");
			}
		}else if("/getLuck".equals(action)){
			Random r = new Random();
			int number = r.nextInt(8888);
			System.out.println("number:" + number);
			out.println(number);
		}
	}
}

  注:这里没有把web.xml贴出来 很简单的配置,就不在此赘述了。

时间: 2024-11-10 15:24:09

小天带你了解ajax的相关文章

小心公共wifi 之小白客带你走进黑客世界:kali linux下的无线攻击技术

本文标签: 黑客世界 wifi安全 无线攻击技术 公共wifi不安全 kali+linux 原文地址:http://whosmall.com/?post=460 我们常说公共wifi不安全,那么到底不安全在哪些地方呢?当不怀好意者和你同在一个wifi下,你的手机或者笔记本会被监听吗?除了上网被监视以外,还会产生什么不好的后果?介于小伙伴们对于wifi这一块比较感兴趣,在这篇文章里,就先为大家普及一下在公共wifi下究竟有多危险. 实验环境 一台装有kali linux的笔记本(模拟攻击者)ip地

小丁带你走进git的世界三-撤销修改(转)

一.撤销指令 git checkout还原工作区的功能 git reset  还原暂存区的功能 git clean  还没有被添加进暂存区的文件也就是git还没有跟踪的文件可以使用这个命令清除他们 git revert 撤销本次提交. 二.指令讲解 Git checkout 首先我们对文件的一个修改,对master.txt进行了修改 修改结果我们利用上面的知识来进行查看. 新增加了Test这么一段话,如果我们想要将工作区的内容添加到暂存区会使用git  add这个命令,如果我们想要还原工作区内容

三石推荐!把 Bootstrap 小清新带回家!

无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion 喜欢就来赞一个! 把麻烦留给三石,把时间留给自己!把 Bootstrap 小清新带回家! 注:Bootstrap Pure(小清新)主题下个版本支持(v2.7.0).

防淘宝带省略号的AJAX分页

<?php /**  * 防淘宝带省略号的AJAX分页  * @param date   * @author hany  */ class AjaxPage { private $total; //数据表中总记录数 private $listRows; //每页显示行数 private $limit;  //分页参数 private $uri;   private $pageNum; //总页数 private $config=array('header'=>"个记录", 

03收银中遇到电脑小图标带红色小叉的处理

收银中遇到电脑小图标带红色小叉的处理 带有红色的叉及没有本地连接电脑小图标显示的情况: 硬件层面: 1.网线没有连接检查网线是否插在收银的网口上面 2.路由器设备没有接电源检查路由器的指示灯是否有亮着 3.水晶头没有插好把水晶头挤一下,插入面板或者交换设备 4.路由器.交换机坏掉打电话,找IT更换 5.外网光纤断了看光猫是否出现亮红灯及光纤是否有光通过,如果没有,出现这样的问题马上打10000电话,安排电信过来检查与抢修 6.有线网卡坏掉一般出现这样的概率非常非常的小,可以忽略不计 这就是关于硬

小编带您Volatile的详解

volatile关键字修饰的共享变量主要有两个特点:1.保证了不同线程访问的内存可见性 2.禁止重排序在说内存可见性和有序性之前,我们有必要看一下Java的内存模型(注意和JVM内存模型的区分)为什么要有java内存模型?首先我们知道内存访问和CPU指令在执行速度上相差非常大,完全不是一个数量级,为了使得java在各个平台上运行的差距减少,哪些搞处理器的大佬就在CPU上加了各种高速缓存,来减少内存操作和CPU指令的执行速度差距.而Java在java层面又进行了一波抽象,java内存模型将内存分为

小编带您进入SpringBoot (1) idea下的环境搭建及demo

1.Spring Boot简介wiki上的介绍: Spring Boot是Spring的常规配置解决方案,用于创建可以"运行"的独立的,生产级的基于Spring的应用程序.[22]它预先配置了Spring对Spring平台和第三方库的最佳配置和使用的"见解视图",因此您可以尽量少开始.大多数Spring Boot应用程序只需要很少的Spring配置.特征: 创建独立的Spring应用程序直接嵌入Tomcat或Jetty(无需部署WAR文件)提供自以为是的"

小编带你了解Netty 系列七(那些开箱即用的 ChannelHandler).

一.前言Netty 为许多通用协议提供了编×××和处理器,几乎可以开箱即用, 这减少了你在那些相当繁琐的事务上本来会花费的时间与精力.另外,这篇文章中,就不涉及 Netty 对 WebSocket协议 的支持了,因为涉及的篇幅有点大,会在下一篇文章做一个具体的介绍. 回到顶部二.SSL 协议SSL 协议是安全协议,层叠在其他协议之上.为了支持 SSL/TLS, Java 提供了 javax.net.ssl 包,它的 SSLContext 和 SSLEngine 类使得实现解密和加密相当简单直接.

没有基础小编带你,用python画机器猫(有代码)

小编带你玩python 没有基础小编带你,用python画机器猫.只需要python3和小编的代码即可.python3小编送,代码文章有,现在就差个你了. 运行不了的找小编,小编包教会你. 重要的事情说三遍: python3小编送,代码文章有. python3小编送,代码文章有. python3小编送,代码文章有. 运行不了的找小编,加Q君羊 八八三四四四一零六. 君羊里的小伙伴和管理员的会这个运行这个源代码.需要学习视频的直接找管理员要,就说是小编让的,烦死她.欢迎小伙伴的加入. 原文地址:h