ajax和Json
ajax
- 简介：Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
js原生的ajax请求（非重点）
步骤繁琐：
- 步骤：
- 1 创建 XMLHttpRequest 对象的语法： var iable=new XMLHttpRequest();
- 2 规定请求的类型、URL 以及是否异步处理请求
- xmlhttp.open(“GET”,“test1.txt”,true);
- get传参 test1.txt?name=zhangsan
- post传参 xmlhttp.send(“name=zhangsan”);
- open(method,url,async)
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
*3 发生请求 xmlhttp.send();
*4、根据状态获取响应信息
`xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}`
*4.1、onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
*4.2、readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*4.3、status
200: “OK”
404: 未找到页面
使用示例：
`<!-- get提交方式 -->
<script type="text/javascript"> var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "${pageContext.request.contextPath }/ss?name=德玛西亚", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;}
} </script>`
`<script type="text/javascript"> var xmlhttp = new XMLHttpRequest();
xmlhttp.open("post", "${pageContext.request.contextPath }/ss", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=dddd");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;}
} </script>`
JQ的ajax请求（重点）
`<script type="text/javascript"> /* jq方式： */
$.ajax({
type: "post", /* 提交方式 */
url: "${pageContext.request.contextPath}/s2", /* 链接地址 */
async:false, /* 是否异步 否表示同步 */
data: {"name":"John","location":"Boston"}, /* 传的参数 " 属性名=属性值&属性名=属性值& " 或者是 { 属性名:属性值,属性名:属性值 } */
dataType:"text", /* 返回的数据类型 */
success: function(msg){ /* 成功时 接收服务器数据的函数 */
alert( "Data Saved: " + msg );}
}); </script>`
- 参数介绍：
- URL：和form表单中的action一样，都是代表请求的路径。
- Data：数据，前台需要向后台传递的数据（一键值对形式）
- Type：和form表单中method对应，代表请求类型 get/post
- dataType：回传的数据类型。Text、xml、html、json…
- success：成功的回调函数
-
async：是否异步
- true 异步 默认
- false 同步
- 啥叫ajax的异步 同步？
- 异步 指的是同一脚本中多个存在多个ajax时候它们是不区分顺序的，而是并发执行 （提交数据时页面还可以操作其他内容）
- 同步 多个ajax按顺序执行。（提交数据时页面不可操作其他内容，页面可能会出现卡顿感）
-
注意事项
- 1、每个属性后都要跟随一个英文逗号，最后一个不用。
- 2、每一个属性都是键值对的形式存在，中间用英文冒号隔开:
- 3、data:{ } 是一个特殊的写法，值是一个{}，里面使用键值对存储，例如：data:{“键1”:值1, “键2”:值2, “键3”:值3}，也可以使用这种： data:" 键1=值1&键2=值2";
- 4、写法属性不用关心顺序问题
JQ的ajax请求简写方式：
`<script type="text/javascript"> /* jq简写方式post ：jQuery.post(url, [data], [callback], [type]) */
$.post(
"${pageContext.request.contextPath}/s2", /* url链接地址 */
{"name":"老六","location":"南美"}, /* 数据 */
function(msg){ /* 成功时回调的函数，以及回调的数据msg */
alert( "Data Saved: " + msg );
},
"text" /* 返回的数据类型 */
) </script>`
- $ .post(url,{},function(){},“text”)
- 是$.ajax({}) 的简写方式，只不过这里只能使用post提交的方式。
- 语法
- $ .post(“链接地址”,{键值对的数据},回调函数,返回值类型);
- $ .post(“check”,{“uname”:uname},function(obj){alert(obj);},“text”);
- 注意：这种写法功能和$.ajax是一样的，不过严格要求属性顺序。
- $ .get(url,{},function(){},“text”);
- 是$ .ajax({}) 的简写方式，只不过这里只能使用get提交的方式。
- 语法
- $ .get(“url”,{键值对的数据},回调函数,返回值类型);
- $ .get(“check”,{“uname”:uname},function(obj){alert(obj);},“text”);
- 注意：这种写法功能和$.ajax是一样的，只不过严格要求属性顺序。
.post()、$ .get()区别:
- 相同点：效果一样异步交互。
- 不同点：
- $.ajax()、这个是jQuery最开始的封装的异步交互、采用的是JavaScript中XMLHttpRequest这一项技术（IE6 最开始支持的）、算是jQuery的第一次封装。功能强大、涵盖了get、post请求、并且书写上不区分顺序问题。
-
.ajax()写法过于臃肿，简化为
.get()，功能是相同的没有区别。但是在书写过程中要求属性的顺序必须按照严格的要求，否则整个Ajax不能使用。
-
.post()快。
关于返回值类型：
- Text 返回纯文本类型 默认
- Html 返回的HTML格式的代码
- Script 直接返回脚本
- Xml 返回xml格式的文件
- Json 返回Json格式的数据
- Jsonp 跨域数据交互协议
- Html的返回和text实质是一样，一般情况下都用text代替了。
ajax之序列化表单信息：快速提取表单信息。
- 简介：序列化这个功能是jQuery的。目的是将表单中的值按固定格式定义出来。
- 选取 < form>进行序列化，但也可以对个别表单元素的 jQuery 对象进行序列化，比如 < input>, < textarea> 等
- 使用方式：表单对象 . serialize()
- 比如：$("#login").serialize( );
- 返回值格式(键值对形式，) ：”名字1”：”值1”&名字2”：”值2”…；
使用示例：
`<form method="post" ,action="">
<input type="text" name="user"/>
<input type="text" name="mail"/>
<input type="radio" value="1" name="gender"> man
<input type="radio" value="2" name="gender"> women
<input type="submit" value="提交"/>
</form>
<script type="text/javascript"> //javascript
$('button').click(function(){
$.ajax({
type : 'POST',
url : '/ajax/',
data : $('form').serialize(), //序列化表单输入，选择内容
success : function (response, status, xhr) {
alert(response);
}
});
}); </script>`
Json：
- 简介：JSON ：一种轻量级的数据交换格式。在 JSON 中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
-
存储特点：
- 对象表示为键值对
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON的数据的3种基本格式：
- 第一种：数组格式 [1, “哈哈”, 5, true]
- 第二种：对象格式 {“name”:“萌萌”,“age”:18}
- 第三种：对象数组
`[{
"name": "张三",
"age": 18,
"score": [93, 94, 99]
}, {
"name": "李四",
"age": 19,
"score": [93, 98, 99]
}, {
"name": "王五",
"age": 20,
"score": [93, 91, 99]
}]`
- 第四种：复杂类型
`{
"class": "0729",
"students": [{
"name": "张三",
"age": 18,
"score": [93, 94, 99]
}, {
"name": "李四",
"age": 19,
"score": [93, 98, 99]
}, {
"name": "王五",
"age": 20,
"score": [93, 91, 99]
}]
}`
json的转化工具：
-
Jsonlib 比较旧的一种转化json的工具，适用于简单的json转化
-
Fastjson 目前比较流行
-
Jackson工具： 经得起考验的一种工具，适用于java的任意框架。
- Jackson可以将我们的对象、集合、数组等转化为json串。Boolean值可以直接不需要转化，作用是获取后台数据，以对象形式去接收便于操作。
- 使用步骤：
- 1、导包：
- jackson-annotations-2.7.9.jar
- jackson-core-2.7.9.jar
- jackson-databind-2.7.9.jar
- 2、实例化ObjectMapper类对象：new ObjectMapper( );
- 3、调用ObjectMapper对象的writeValueAsString()方法，放进String、对象、数组等。比如：mapper.writeValueAsString(room);返回的是一个String；
- 4、接收调用。
使用示例：
package com.offcn.json.utils;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.offcn.entity.ClassRoom;
import com.offcn.entity.User;
import com.sun.org.apache.bcel.internal.generic.NEW;
@WebServlet("/j1")
public class JsonObejectDemo01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Object arr[] = new Object[6];
arr[0] = "大波浪";
arr[1] = 18;
arr[2] = true;
arr[3] = new int[] { 1, 2, 3 };
ArrayList<String> list = new ArrayList<String>();
list.add("1号元素");
list.add("2号元素");
arr[4] = list;
arr[5] = null;
HashMap<Integer, Object[]> map = new HashMap<Integer, Object[]>();
map.put(1, arr);
ObjectMapper mapper = new ObjectMapper();
String string = mapper.writeValueAsString(map);
System.out.println(string);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
//结果：
{"1":["大波浪",18,true,[1,2,3],["1号元素","2号元素"],null]}
网友评论