Ajax
ajax即“Asynchronous Javascript And XML”(异步于JavaScript和XML),是指一种创建交互式网页应用的网页开发技术
Ajax=异步JavaScript和XML或者是HTML标准通用标记语言的子集
Ajax是一种用于创建快速动态网页的技术
Ajax是一种在无需要重新加载整个网页的情况下,能够更新部分网页的技术,对网页某部分进行更新
传统网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面
异步:发送请求后不等返回结果,由回调函数处理结果
名称来源
Ajax整个术语源自描述从基于web的应用基于数据的应用,它不是一种新的编程语言,儿时一种用于创建更好更快以及交互性更强的web应用程序的技术
优缺点:
优点:
a、就是能在不更新的整个页面的前提下维护数据。这使得web应用程序更为迅捷的回应工作,并避免了在网络上发送哪些没有改变的信息
b、不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世
缺点:
a、它能破坏浏览器的后退与加入收藏书签功能,在动态页面更新页面的情况下,用户无法回到前一个页面状态,用户通常希望点击后退按钮就能够取消他们的前一次操作,在Ajax应用程序中无法这样做,但是也有开发者想出了种种办法来解决
b、无法将状态加入收藏或书签的问题,HTML5之前的一种方式是使用URL片断标识符(通常被称为锚点,也就是URL中#后面的部分)来保持追踪
c、进行Ajax开发是,网络延迟----即用户发出请求到服务器发出响应之间的间隔-----需要慎重考虑,如果不给与用户明确的回应,没有恰当的预读数据,或者XMLHttprequest的不恰当处理,都会使客户厌烦。通常的解决方案就是使用一个可视化组件来告诉用户系统正在进行后台操作并且用户正在读取数据和内容。
XMLHttpRequest
(1)JavaScript对象XMLHttpRequest是整个Ajax技术的核心,它提供了异步发送请求的能力
(2)常用方法
方法名 | 说明 |
---|---|
open(method,URL,async) | 建立与服务器的连接,method参数指定请求的http方法,典型的值get或post url参数指定请求的地址 async参数指定是否使用异步请求 |
send(content) | 发送请求 content参数指定请求的参数 |
setRequestHeader(header,value) | 设置请求的头信息 |
(3)常用属性:
onreadystatechange:指定回调函数
readystate:XMLHttpRequest的状态信息
(4)常用属性:
status:http的状态码
responseText:获得响应的文本内容
responseXML:获得响应的XML文档对象
jQuery中Ajax的调用
通过 HTTP 请求加载远程数据
一、$.ajax()
常用参数 | 说 明 |
url | 一个用来包含发送请求的URL字符串(请求地址) |
type | 请求方式 (“POST” 或 “GET“[默认]) |
data | 发送到服务器的数据(参数) |
dataType | 预期服务器返回的数据类型(xml、json、text) |
success(data) | 请求成功的回调函数 |
error | 请求失败的回调函数 |
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出
错时执行函数,请使用 $.ajax。
//加载函数
$(function(){
//根据jQuery提供的选择器获取到输入框 设置失焦事件
$("#username").blur(function(){
//alert(123);
//获取到输入框中的value值
var username=$(this).val();
//alert(username);
//使用ajax的方式将username转入后台
$.post("register.do",{"username":username},function(data){
//alert(data);
$("#username_error").html(data);
});
});
});
JSON
json是什么?
JavaScript对象表示法
储存和交换文本信息的语法
比XML更小、更快,更容易解析
轻量级的文本数据交换格式
独立语言
JSON仍然独立于语言和平台,JSON解析器和JSON库支持许多不同的编程语言
JSON转换为JavaScript对象
JSON文本格式在语法上与创建JavaScript对象的代码相同
由于这种相似性,无需解析器,JavaScript程序能够使用内建的eval()函数,由于JSON数据来生成原生的JavaScript对象
JSON和XML类似
JSON是纯文本、具有自我描述性(人类可读)、具有层级结构、可通过JavaScript进行解析、数据可使用Ajax进行传输
JSON和XML的不同之处
JSON没有结束标签
更短
读写的速度更快
能够使用内建JavaScript eval()方法进行解析
使用数组
不能使用保留字
为什么要使用JSON?
(1)对于Ajax应用程序来说,JSON比XML更快更容易使用:
使用XML:
a、读取XML文档
b、使用XML DOM来循环遍历文档
c、读取值并储存在变量中
使用JSON:
a、读取JSON字符串
b、用eval()处理JSON字符串
JSON的语法结构
(1)JSON语法是JavaScript语法的子集
(2)JSON语法规则
JSON语法是JavaScript对象表示语法的子集
a、数据在名称/值对中
b、数据由逗号分隔
c、花括号保存对象
d、中括号保存数值
(3)JSON名称/对值
a、JSON数据的书写格式是:名称/值对
名称/值对摆阔字段名称(在双引号中),后面写一个冒号,然后是值
"firstName":"aa"
这很容易理解,等价于这条JavaScript语句中:
firstName="aa"
(4)JSON值
JSON值可以是:
a、数字(整数或浮点数)
b、字符串(在双引号中)
c、逻辑值(true或false)
d、数组(在中括号中)
e、对象(在花括号中)
f、null
(5)JSON对象
JSON对象在花括号中书写:
对象中可以包含多个名称/值对:
{"uname":"aa","usex":"女","age":18}
(6)JSON数组
JSON数组在方括号中书写:
数组可包含多个对象:
{
"employees"[
{
"name":"aa",
"name":"aa",
}
]
}
JSON的使用
实例代码
//1.fastJSON
//(1)导包 上课资料---JSON
//实例化一个User
/*User u=new User("aa", "女", 18);
//User [uname=aa,usex=女,age=18]
//System.out.println(u.toString());
//将u转换成一个JSON定义格式的字符串
String jsonString = JSON.toJSONString(u);
//{"age":18,"uname":"aa","usex":"女"}
System.out.println(jsonString);
String u2="{\"age\":18,\"uname\":\"aa\",\"usex\":\"女\"}";
User u3 = JSON.parseObject(u2, User.class);
System.out.println(u3.getUname());*/
User user=new User("aa", "女", 18);
//2.jackJSON
//实例化一个json格式转换对象
ObjectMapper mapper=new ObjectMapper();
String writeValueAsString = mapper.writeValueAsString(user);
System.out.println(writeValueAsString);
List<User> list=new ArrayList<User>();
for (int i = 0; i < 5; i++) {
list.add(new User("zkingzz"+i, "男", 18+i));
}
String writeValueAsString2 = mapper.writeValueAsString(list);
System.out.println(writeValueAsString2);
System.out.println("------------------------------");
Map<String, Object> maps=new HashMap<String, Object>();
for (int i = 0; i < 5; i++) {
maps.put("t280"+i, new User("aa"+i, "男", 18+i));
}
String writeValueAsString3 = mapper.writeValueAsString(maps);
System.out.println(writeValueAsString3);
String u2="{\"age\":18,\"uname\":\"aa\",\"usex\":\"女\"}";
User readValue = mapper.readValue(u2.getBytes(),User.class);
System.out.println(readValue.getUname());