Web基础了解版11-Ajax-JSON
Ajax
AJAX即“Asynchronous Javascript And XML”:是,不发生页面跳转、异步请求载入内容并改写局部页面内容的技术。
也可以简单的理解为通过JS向服务器发送请求。
同步处理:
就是当我们通过一个页面向服务器发送一个请求时,在服务器响应结束之前,我们的整个页面是不能操作的,并且即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。
异步处理:
通过AJAX向服务器发送请求,当服务器正常响应请求后,响应信息会直接发送到AJAX中,AJAX可以根据服务器响应的内容做一些操作。并可局部的修改页面,而不需要整个页面刷新。
请求对象:XMLHttpRequest
- XMLHttpRequest对象用来封装请求报文,我们向服务器发送的请求信息全部都需要封装到该对象中。
获取XMLHttpRequest对象,不同浏览器之间有差异
//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
var xhr;
try{
//大部分浏览器都支持
xhr = new XMLHttpRequest();
}catch(e){
try{
//如果不支持,在这里捕获异常并且采用IE6支持的方式
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//如果还不支持,在这里捕获异常并采用IE5支持的方式
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
XMLHttpRequest对象的方法
open(method,url,async):用于设置请求的基本信息,接收三个参数。
参数一:method
接收一个字符串,表明请求的方法:get或post
参数二:url
请求的地址,接收一个字符串
参数三:Assync
发送的请求是否为异步请求,接收一个布尔值。① true 是异步请求 ② false 不是异步请求(同步请求)
send(string):用于将请求发送给服务器,可以接收一个参数
string参数
该参数只在发送post请求时需要。用于设置请求体
setRequestHeader(header,value):用于设置请求头
参数一:header参数
字符串类型,要设置的请求头的名字
参数二:value参数
字符串类型,要设置的请求头的值
XMLHttpRequest对象的属性
readyState
描述XMLHttpRequest的状态
一共有五种状态分别对应了五个数字:
0 :请求尚未初始化,open()尚未被调用
1 :服务器连接已建立,send()尚未被调用
2 :请求已接收,服务器尚未响应
3 :请求已处理,正在接收服务器发送的响应
4 :请求已处理完毕,且响应已就绪。
status
请求的响应码
200 响应成功
404 页面为找到
500 服务器内部错误
......
onreadystatechange
该属性需要指向一个函数
该函数会在readyState属性发生改变时被调用
responseText
获得字符串形式的响应数据。
responseXML(用的比较少)
获得 XML 形式的响应数据。
JQuery的Ajax请求
四个Ajax请求方法
$.ajax方法
$.get方法
$.post方法
$.getJSON方法
一个表单序列化方法:serialize()表单序列化方法
$.ajax请求
- url: 请求的地址
- type : 请求的方式 get或post
- data : 请求的参数 string或json
- success: 成功的回调函数
- dataType: 返回的数据类型 常用json或text
$.get和$.post请求
- url:请求的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式,xml, html, script, json, text。
$.getJSON请求
- url:待载入页面的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
表单的序列化
serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接
$.ajax({
url : "ajaxServlet", // 请求地址
error:function(){ // 请求失败回调
alert("请求失败");
},
success:function(data){ // 请求成功回调
alert( data );
},
type:"POST", // 请求的方式
dataType:"json", // 返回的数据类型为json对象
data:{ // 请求的参数
action:"jqueryAjax",
a:12,
date: new Date()
}
});
JSON
JSON是JavaScript Object Notation 的缩写,是JS提供的一种轻量级的数据交换格式, 易于人阅读和编写。同时也易于机器解析和生成。
JSON对象本质上就是一个JS对象,但是这个对象比较特殊,它可以直接转换为字符串,在不同语言中进行传递,通过工具又可以转换为其他语言中的对象。
在标准的json格式中,json对象由大括号括起来,对象中的属性也就是json的key是一个字符串,所以一定要使用双引号引起来。每组key之间使用逗号进行分隔。
JSON 6种数据类型
字符串 //注意:不能使用单引号
数字
布尔值
null值
对象
例子:{“name”:”sunwukong”, ”age”:18}
数组
例子:[1,”str”,true]
JSON对象的访问
key就是对象的属性。我们要访问一个对象的属性,只需要使用【对象名.属性名】的方式访问即可。
JSON对象和字符串对象的互转
JSON.stringify( json ):此方法可以把一个json对象转换成为json字符串
JSON.parse( jsonString ): 此方法可以把一个json字符串转换成为json对象
JSON在Java中的使用
Gson 提供了用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库,可以将一个 JSON 字符串转成一个 Java 对象,或者反过来。
java对象和json的转换
java对象list集合和json的转换
map对象和json的转换
// json操作,一定要先new一个gson对象。
Gson gson = new Gson(); // 1、把对象转成为json字符串
String personjson = gson.toJson(person);
// 把json字符串转换成为java对象
Person p = gson.fromJson(personjson, Person.class); //2、java对象list集合和json的转换
String jsonListString = gson.toJson(list);
// 把json数组转换成为List对象
List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType()); // 3、map对象和json的转换
String jsonMapString = gson.toJson(mapPerson);
// 通过使用匿名内部类的方式
Map<String, Person> map = gson.fromJson(jsonMapString,new TypeToken<HashMap<String, Person>>() {}.getType());
Web基础了解版11-Ajax-JSON的更多相关文章
- Web基础了解版07-EL表达式-运算符-11个隐式对象
EL EL(Expression Language)是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进 ...
- Web基础了解版03-jQuery
jQuery jQuery,顾名思义,也就是JavaScript和查询(Query)极大地简化了JavaScript开发人员遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax. jQuer ...
- Web基础了解版04-XML-Tomcat-Http
XML 什么是XML - Tomcat - Http XML:eXtensible Markup Language (可扩展标记语言). XML 是一种标记语言,很类似 HTML. XML 的设计宗旨 ...
- Web基础了解版02-JavaScript
JavaScript 特性 ① 解释型语言.JavaScript是一种解释型的脚本语言,JavaScript是在程序的运行过程中逐行进行解释,不需要被编译为机器码再执行. ② 面向对象.JavaScr ...
- Web基础了解版05-Servlet
Servlet Servlet? 从广义上来讲,Servlet规范是Sun公司制定的一套技术标准,包含与Web应用相关的一系列接口,是Web应用实现方式的宏观解决方案.而具体的Servlet容器负责提 ...
- Web基础了解版06-Jsp
Jsp Jsp全称Java Server Pages,也就是在我们JavaWeb中的动态页面. Jsp能够以HTML页面的方式呈现数据,是一个可以嵌入Java代码的HTML. Jsp其本质就是一个Se ...
- Web基础了解版10-Filter-Listener
Filter 对于WEB应用来说,过滤器是一个驻留在服务器中的WEB组件,他可以截取客户端和WEB资源之间的请求和响应信息. 在一个WEB应用中可以部署多个过滤器,多个过滤器就组成了一个过滤器链,请求 ...
- Web基础了解版09-Cookie-Session
Cookie Cookie 是一种服务器发送给浏览器以键值对形式存储小量信息的技术. 当浏览器首次请求服务器时,服务器会将一条信息封装成一个Cookie发送给浏览器,浏览器收到Cookie,会将它保存 ...
- Web基础了解版01-html-css
HTML 网页构成 摘要 说明 结构(HTML) HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 表现(CSS) CSS样式是表现.就像网页的 ...
随机推荐
- MapReduce数据流-概述
- HZOJ 走格子
作者的正解: 对于100%的数据:行动可以分为两种: 1. 步行,花费一个单位的时间移动到4联通的相邻格子中去. 2. 使用传送门,指定一个方向的墙的前面的一个格子,步行至最近的一个墙的面前,使用传送 ...
- http://www.freeopensourcesoftware.org
Applications http://www.freeopensourcesoftware.org/index.php?title=Applications Main Page > Thi ...
- Python进阶04函数的参数对应
我们已经接触过函数(function)的参数(arguments)传递.当时我们根据位置,传递对应的参数.我们将接触更多的 参数传递方式. 回忆一下位置传递: def f(a,b,c): return ...
- POJ2752 Seek the Name, Seek the Fame 题解 KMP算法
题目链接:http://poj.org/problem?id=2752 题目大意:给你一个字符串 \(S\) ,如果它的一个前缀同时也是它的后缀,则输出这个前缀(后缀)的长度. 题目分析:next函数 ...
- HDU1711 Number Sequence 题解 KMP算法
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1711 题目大意:最基础的字符串匹配,只不过这里用整数数组代替了字符串. 给你两个数组 \(a[1..N ...
- 访问HTML可以,访问PHPfile not found
www目录的所有者和所属组都改为nginx用户试一下. 参考命令: chown nginx.nginx /home/www ps aux |grep nginx 看一下您的nginx是以哪个用户的 ...
- linux下svn清除非版本控制文件的方法
使用svn status命令,文件名前面显示问好的就是非版本控制的文件
- [转]ASP.NET WebApi OWIN 实现 OAuth 2.0
OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth 允许用户提供一个令牌, ...
- UVa 1152 -4 Values whose Sum is 0—[哈希表实现]
The SUM problem can be formulated as follows: given four lists A, B, C, D of integer values, compute ...