一、ajax
1.ajax介绍
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。
2.ajax入门程序
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），即代码是写在了js里面。
1）创建一个核心对象 XMLHttpRequest
对于不同的浏览器，获取方式有区别(从文档上粘过来)
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
2）编写一个回调函数
xmlHttp.onreadystatechange=function(){};
该函数目的是服务器端响应完成后，浏览器端可以知道，并通过该function内部功能，完成后续工作。
3）编写请求方式和请求的路径(open操作)
xmlHttp.open(“GET”,”/day/ajax”);设置访问的资源路径以及请求方式
4）发送请求(send操作)
xmlhttp.send();发送请求
3.XMLHttpRequest之API详解
Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
onreadystatechange属性
当XMLHttpRequest对象的状态改变时会调用该函数
readyState属性
对于XMLHttpRequest对象，它有一个属性readyState，它有五个状态
0：创建XMLHttpRequest对象
1：当open时
2：当send时
3：响应头已经返回，但响应正文没有完成，也就是响应没有完全完成
4：响应完成了
一般情况下，在回调的函数中，我们都是判断
if(xmlhttp.readyState==4&&xmlhttp.status==200)
来接收服务器端响应的信息。
status属性
由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
responseText属性
目前为止服务器接收到的响应体（不包括头部）。或者如果还没有接收到数据的话，就是空字符串；如果 readyState 小于 3，这个属性就是一个空字符串；当 readyState 为 3，这个属性返回目前已经接收的响应部分；如果 readyState 为 4，这个属性保存了完整的响应体。
注意：部分浏览器，例如谷歌就不支持该属性，无法从response.Text中取出服务器写回的数据（据说是跨域问题）。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，使用 Unicode UTF-8。
responseXML属性
对请求的响应，解析为 XML 并作为 Document 对象返回。
open方法
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
xmlhttp.open(请求方式,url);
请求方式: POST GET
路径：客户端路径 格式 /工程名/资源路径
如果是GET方式，想要向服务器发送请求，并且携带请求参数，可以直接在url后面连接。
如果是POST方式，想要向服务器发送请求，并且携带请求参数，只能在send时传递参数，但是这个时候必须要用setRequestHeader方法添加一个请求头，否则servlet收到的请求体信息为null。
xmlhttp.open("post","/day15/ajax2");
//设置请求头，该信息可以通过form表单的 enctype自动补齐得到的属性直接获取到。
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//send
xmlhttp.send("username=张三");
send方法
发送 HTTP 请求， open() 方法的参数即send()中的内容。如果请求方式是post，并且要携带参数，可以通过send的参数来传递。
中文乱码问题
get请求需要在发送请求的时候对中文进行编码，如下:
xmlhttp.open("get","${pageContext.request.contextPath}/ajax?usernme="+encodeURI(document.getElementById("username").value));
服务器端处理方式：
post中：request.setCharacterEncoding("utf-8");
get中：String name = req.getParameter("name");name = new String(name.getBytes("iso-8859-1"),"utf-8");
response.setContentType("text/html;charset=utf-8");
4.使用原生的ajax判断用户是否为空
body中的代码：
<td><input type="text" name="username" onblur='checkUsername(this)'></td>
script中的代码：
function checkUsername(obj){
//创建核心对象
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//xmlhttp.responseText;
if(xmlhttp.responseText==1){
document.getElementById("usename_msg").innerHTML="<font color='green'>用户名可以使用</font>";
document.getElementById("sub").disabled=false;
}else{
document.getElementById("usename_msg").innerHTML="<font color='red'>用户名已被占用</font>";
document.getElementById("sub").disabled=true;
}
}
}
//open操作
xmlhttp.open("get","${pageContext.request.contextPath}/checkUser?username="+obj.value);
//send
xmlhttp.send();
}二、jquery中的ajax
1.jQuery中ajax四种方式
了解：jquery对象.load(url,params,function(数据){}); 一般采用的是get请求方式。json格式的数据采用post。
<head>
<title>Title</title>
<script type="text/javascript" src = "${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var url = "/jqueryAjax";
var params = "username = dragon";
$(this).load(url,params,function (d) {
alert(d);
});
});
})
</script>
<body>
<input type="button" value="click on me" id="btn">
</body>★: $.get(url,params,function(数据){},type);发送get请求的ajax
url:请求的路径
params:请求的参数，参数为key、value的形式
fn:回调函数，参数就是服务器发送回来的数据
type:返回内容格式，xml, html, script, json, text, _default。以后用"json"
★: $.post(url,params,function(数据){},type);发送post请求的ajax
若结果为json格式, 打印返回值的时候是一个对象
例如若json为 {"result":"success","msg":"成功"}，获取msg只需要：参数.msg
理解：$.ajax([选项])
选项的可选值：
url：请求路径
type：请求方法
data：发送到服务器的数据
success：fn 成功以后的回调
error：fn 异常之后的回调
dataType：返回内容格式 经常使用json
async：设置是否是异步请求
$.ajax({
url:"/day15/demo1",
type:"post",
data:"username=tom",
success:function(d){
alert(d.msg);
},
error:function(){},
dataType:"json"
});2.使用原生的ajax判断用户是否为空
$(function(){
$("input[name='username']").blur(function(){
var $value=$(this).val();
$.get("/day15/checkUsername4Ajax","username="+$value,function(d){
if(d==1){
$("#usename_msg").html("<font color='green'>用户名可以使用</font>");
}else{
$("#usename_msg").html("<font color='red'>用户名已被使用</font>");
}
});
});
})3.模仿百度搜索
在一个文本框中输入一段内容。keyup的时候发送一个ajax请求。去数据库中查找相应的内容，在页面上展示。
步骤分析:
1.表
create table keyword(
id int primary key auto_increment,
kw varchar(20)
);
2.页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//文本框keyup的时候发送ajax
$("#tid").keyup(function(){
//获取文本框的值
var $value=$(this).val();
//内容为空的时候不发送ajax
if($value!= null && $value!=''){
//清空div
$("#did").html("");
$.post("/searchKw","kw="+$value,function(d){
//不为空的时候切割字符串
if(d!=''){
var arr=d.split(",");
$(arr).each(function(){
//alert(this);
//可以将每一个值放入一个div 将其内部插入到id为did的div中
$("#did").append($("<div>"+this+"</div>"));
});
//将div显示
$("#did").show();
}
});
}else{
//内容为空的时候 将div隐藏
$("#did").hide();
}
});
})
</script>
<title>Insert title here</title>
</head>
<body>
<center>
<div>
<h1>dragon</h1>
<div>
<input name="kw" id="tid"><input type="button" value="search">
</div>
<div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div>
</div>
</center>
</body>
</html>3.在文本框输入内容 keyup的时候发送ajax请求将输入值传递到后台
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//0.设置编码
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//1.获取kw
String kw=request.getParameter("kw");
//2.调用service完成模糊操作 返回值:list
List<Object> list=null;
try {
list = new KeyWordService().findKw4Ajax(kw);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//3.将数据 [a,aa,aaa] 去掉括号 写回去 a,aaa,aa
if(list!=null && list.size()>0){
String s = list.toString();
s=s.substring(1, s.length()-1);
System.out.println(s);
response.getWriter().println(s);
}
}三、json
1.概念
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(网络传输速度)。
2.JSON结构有两种结构
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构
- 对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
- 数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
3.jsonlib介绍
Json-lib 是一个 Java 类库（官网：http://json-lib.sourceforge.net/）可以实现如下功能：
•转换 javabeans, maps, collections, java arrays 和 XML 成为 json 格式数据
•转换 json 格式数据成为 javabeans 对象
Json-lib 需要的 jar 包
•commons-beanutils-1.8.3.jar
•commons-collections-3.2.1.jar
•commons-lang-2.6.jar
•commons-logging-1.1.1.jar
•ezmorph-1.0.6.jar
•json-lib-2.4-jdk15.jar
4.jsonlib常用api
数组，Collection集合转换成json数据使用 JsonArray.fromObject(对象);
Map，javaBean转换成json数据使用 JsonObject.fromObject(对象);
如果不想让javaBean中的数据出现在json中。
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});
JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);
System.out.println(jsonObject);
注意：如果服务器端返回的数据格式是json格式，那么我们在浏览器端得到数据时，需要使用eval函数将字符串转换成json对象
var msg=xmlhttp.responseText;
var obj=eval(msg);
有的时候通过eval转换时，得不到一个json对象，这时做以下操作
var obj=eval("("+msg+")");
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
