服务端技术|ajax技术

第一章 ajax技术

局部刷新，异步加载

1.1. 什么是ajax技术？

Ajax的技术：Ajax被认为是(Asynchronous JavaScript and XML的缩写）。异步的js与xml

使用Ajax技术可以使用js来访问服务器，而且是异步数据交互。

一般的情况下，服务器给客户端的响应都是整个页面，一个完整的HTML页面

但是在Ajax中因为是局部刷新，那么服务器就不用再发整个页面了，而只是数据。

Text ：纯文本

Xml ：XML数据
Json ：它是js提供的数据交互的格式！

1.2. 什么是异步，什么是同步？

同步：发送一个请求，就要等服务器的响应结束，然后才能发第二个请求！中间这段时间就是一个字等！！！它刷新的是整个页面。

异步：发送一个请求后，无需等待服务器的响应，然后就可以发第二个请求。可以使用js接收服务器的响应，然后使用js使页面进行局部刷新。

1.3. ajax应用场景？

Js可以完成ajax技术，但过于繁琐，而且实用性不强，所以开发中基本不用

1.4. AJAX包含的技术

AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；

DOM（Document Object Model,文档对象模型）实现动态显示和交互；

使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

使用JavaScript绑定和处理所有数据

1.5. AJAX的优缺点

Ajax的优点：

​ 异步交互，增强了用户的体验

性能：只需要响应部分内容，而不是整个页面，所以服务器的压力减轻了。

AJAX不是完美的技术。也存在缺陷：

1 AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

2 AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

第二章 jquery Ajax

2.1. jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据自动放入被选元素中。

语法：$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

Load方法特点：1.请求方式是自动设置的，如果客户端向服务器端发送了数据，是post请求如果没有发送数据是，get请求2. 一定要绑定到一个控件上面做ajax请求3. 放回的数据会自动填充到控件（标签）中

2.2. jQuery - AJAX get() 和 post() 方法

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

2.3. jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

2.4. jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。语法：$.post(URL,data,callback);必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。可选的 callback 参数是请求成功后所执行的函数名。

第三章 用户是否已注册案例

前端界面：

1
2
3
4
5
6
7
8
9
10
11
$(function(){
	$("#username").blur(function(){
		var json={
		   username:$("#name").val(),
		}
		$("#sp1").load("/ajax/UserServlet",json,function(data,text,XMLHTTPRequest){

		})
	})
});

Servlet:

1
2
3
4
5
6
boolean rs=userService.findByUserName(username);
  if(rs) {
 	 response.getWriter().write("该用户已经被注册");	    
  }else {
 	 response.getWriter().write("可以注册");
  }

Form表单绑定校验方法：

1
<form method="post" onsubmit="return checksubmit()">

3.1. 序列化元素

Serialize()方法;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
	$(function() {
		$("#sp1").click(
				function() {
					//serialize()可以将form表单中的值封装
					var json = $("#form1").serialize();

					$.post("/JavaWebDay10/AjaxServlet2", json, function(data,
							XMLHttpReuest) {

					});
				});

	});
</script>

3.2. 练习：Ajax注册操作

第四章 Ajax查询操作

1
2
3
4
5
6
7
8
9
10
$(function(){
	$("#search").click(function(){
		  var json={
				   username:$("#username").val(),
				}
		$.post("/ajax/SearchServlet",json,function(data,text,XMLHTTPRequest){
	         
		})
	})
});