加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

ajax/jsonlib

发布时间：2020-12-16 01:50:16 所属栏目：百科 来源：网络整理
导读：**ajax的概述** 1.ajax的概述 * 异步的js和XML 2.异步和同步 * 同步：使用表单或者超链接提交数据，采用的都是同步的方式 * 需要把表单全部提交到Servlet中，页面发生跳转，需要等待服务器端做出现相应，如果服务器端没有做出响应，需要等待，而不能做其他的

**ajax的概述**

1.ajax的概述
* 异步的js和XML

2.异步和同步
* 同步：使用表单或者超链接提交数据，采用的都是同步的方式
* 需要把表单全部提交到Servlet中，页面发生跳转，需要等待服务器端做出现相应，如果服务器端没有做出响应，需要等待，而不能做其他的事情。
* 异步：使用XMLHttpRequest对象完成异步的操作，和服务器进行数据的交互
* 不是提交整个页面，而是提交一部分的数据，获取到服务器端响应的数据，做局部刷新。如果服务器也没有响应，进行操作其他的页面内容。

3.异步的应用
* 百度的输入框
* 验证用户名是否已经存在

4.异步的方式：在服务器端可以向客户端响应什么类型的数据呢？
* text-- 字符串（在前台获取到就是字符串）
* XML-- XML格式的数据（在前台获取到是Document对象）
* json-- 特殊的字符串，有自己格式（获取到是字符串，需要使用eval函数执行一次，执行后返回的json的对象）

* 总结：响应的这些都是比较简单的内容，不是整个HTML的页面

**ajax技术的开发步骤及其入门(固定5步)**

----1.学习ajax掌握XMLHttpRequest对象。

* 使用异步的技术，需要使用XMLHttpRequest对象。
* 该对象封装HTTP的协议
* 也可以采用GET或者POST方式请求服务器
* 获取服务器端的响应的内容
* 响应都是字符串或者XML文档

---- 2.ajax技术开发，编写代码的步骤就是固定的。

----3.开发的入门步骤（固定的）

* 第一步：需要先获取到XMLHttpRequest对象。
直接获取: var xhr = new XMLHttpRequest();-- 支持火狐、谷歌或者IE的高版本的浏览器

兼容获取:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createXMLHttpRequest(){
try {
// 如果是你是IE高版本 火狐 谷歌
return new XMLHttpRequest();
} catch (e) {
try {
// 如果是IE6的版本
return new ActiveXObject( "Msxml2.XMLHTTP" );
} catch (e) {
try {
// 如果是IE5.5版本
return new ActiveXObject( "Microsoft.XMLHTTP" );
} catch (e) {
alert( "大哥！您这是什么浏览器呀！！" );
}
}
}
}
* 第二步
* 如果第一步已经获取到了XMLHttpRequest对象了，下一步，需要连接访问服务器端资源。
* open("请求方式","请求资源的路径",boolean);
* 3个方法的含义
* 1.代表的请求的方式，常用的有GET或者POST
* 2.代表的请求资源的路径，例如：${pageContext.request.contextPath}/xxxservlet
* 3.值是boolean类型的值，如果是true，说明的异步操作，如果是false，说明是同步操作。一般情况下是true
* 第三步
* 发送请求的参数
* send(请求体的内容);
* 如果请求方式是POST请求，send方法中正常传递参数了。 xhr.send("username="+haha+"&password="+123)
* 如果请求方式是GET请求，send方法一般就不传递参数了。
* 可以使用open方法来传递参数：例如：${pageContext.request.contextPath}/xxxservlet?username=haha
* 如果GET请求，一般还不传递参数的情况下，send一般传递nullxhr.send(null);
* 第四步
* 整体的目的：接收服务器端做出的响应。但是要怎么来接收呢？
* XMLHttpRequest提供了属性，使用该属性监听XMLHttpRequest对象的状态的改变。该XMLHttpRequest对象由哪些状态
* 0-- 刚创建该对象
* 1-- 调用open方法，还没有发生请求
* 2-- 已经调用了send方法，发送了请求，但是还没有得到响应
* 3-- 做出了响应，但是有可能响应没有结束
* 4-- 响应结束了

* 代码如下

1
2
3
4
5
6
7
8
9
10
xhr.onreadystatechange = function (){
// 做出判断，如果xhr的对象状态已经为4了，说明响应已经结束了
// 不仅会判断状态是否为4，还会判断状态码是否为200
if (xhr.readyState == 4 && xhr.status == 200){
// 在该位置，获取到响应的内容了。
// 接收响应的代码
var result = xhr.responseText;
}
};
* 第五步
* 接收响应的内容
* 如果服务器端响应的是字符串，var result = xhr.responseText;result就代表的是字符串
* 如果服务器端响应的XML的内容，var result = xhr.responseXML;result就代表的是document对象

**ajax发送POST请求**


1.向服务器发送的POST请求
* xhr.open("POST","地址",true)
* 设置请求的头的信息
* xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* xhr.send(参数);

2.编写代码演示POST请求


**json数据格式的概述**


1.json的概述：js提供一种数据交换的数据的格式。一般的情况下，都是在后台的拼接成json数据，响应的前台。使用js代码就非常方便操作json。
2.json数据 格式的规范
* 定义json数据 格式必须使用{}括起来，对外提供的方式就是对象。
* var person = {};

* 对象包含属性和值，如果是属性，必须是双引号括起来，不能使用单引号。
* var person = {"name":"张三","age":18};

* 值是类型
* null
* 数字
* 字符串
* 数组使用[]括起来
* booleantrue或者false

3.定义json的格式
* var person = {"name":"zhangsan","age":18};
* 包含属性和属性值之间使用 冒号（：）
* 属性与属性之间是 逗号（,）
* 获取属性的值 person.name 或者 person.age

4.完成前后台的交互
* 从后台发送json数据格式的数据。在前台使用js解析数据。

5. 从后台响应的json格式的数据，到前台使用eval函数执行一次。
* 使用eval函数 全局函数，可以执行js的代码 并且执行的时候拼接小括号
* 例如： var msg = eval("("+text+")");
* 必须要使用eval的函数，执行后的结果才是json对象。

**jsonlib工具类的使用**
1.作用：后台提供的工具类，可以把JavaBean转换成json数据格式。

2.导入jar包。

3.记住这两个类
* 都有一个toString()方法，把JSONObject转换字符串的json的数据格式
* JSONObject---------------------->(用于处理javabean和Map集合)
* 把该类当成Map集合来记。
* 提供的一些方法
* put(key,value)
* 静态方法：fromObject(JavaBean)传入进去，返回的JSONObject类

* JSONArray------------------------>(用于处理list和Array数组类数据)
* 把该类当成List集合来记。
* add(JavaBean)-- 返回的类似数组的json格式。
* toString()-- 把JSONArray转发字符串json数据格式

注意:如果传入的对象有引用其他对象,可能会引起死循环

解决办法:传入参数的时候,传入一个JsonConfig对象进去,这个对象扩滤掉相关的对象
1
2
3
4
5
6
7
8
9
10
//=======================解决内置死循环=============================
JsonConfig jsonConfig = new JsonConfig();
//设置不去查询的对象
jsonConfig.setExcludes( new String [] { "crmDepartment" , "crmStaffs" });
//===================================================================
String jsonString = JSONArray.fromObject(AllpostByDepId,jsonConfig).toString();
//解决中文乱码问题
ServletActionContext.getResponse().setContentType( "text/html;charset=UTF-8" );
ServletActionContext.getResponse().getWriter().write(jsonString);
4.总结
* jsonlib工具类目的，在服务器端把对象转换成json格式的字符串。
* 提供了两个类
* JSONObject
* put(key,value)
* 静态方法，fromObject(Object)
* toString()

* JSONArray
* add()
* toString()

**案例代码:AJAX+JSON**

1.具体代码如下
AJAX:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//1.获取连接对象(固定)
function createXMLHttpRequest(){
try {
// 如果是你是IE高版本 火狐 谷歌
return new XMLHttpRequest();
} catch (e) {
try {
// 如果是IE6的版本
return new ActiveXObject( "Msxml2.XMLHTTP" );
} catch (e) {
try {
// 如果是IE5.5版本
return new ActiveXObject( "Microsoft.XMLHTTP" );
} catch (e) {
alert( "大哥！您这是什么浏览器呀！！" );
}
}
}
}
function changePost(aa){
var depid = aa.value;
//获取对象
var res =createXMLHttpRequest();
//连接服务器访问资源
res.open( "post" , "${pageContext.request.contextPath}/CrmPostAction_findAllpostByDepId.action" , true );
// 设置请求头
res.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
//发送连接参数
res.send( "crmDepartment.depId=" +depid);
//接受服务器返回的状态码
res.onreadystatechange = function (){
// 做出判断，如果xhr的对象状态已经为4了，说明响应已经结束了
// 不仅会判断状态是否为4，还会判断状态码是否为200
if (res.readyState == 4 && res.status == 200){
var postSelect = document.getElementById( "postSelectId" );
// 在该位置，获取到响应的内容了。
// 接收响应的代码
var result = res.responseText;
//手动处理json数据
var jsonData = eval( "(" +result+ ")" );
// javascript 遍历json并添加数据
for ( var i = 0 ; i < jsonData.length ; i ++){
var postObj = jsonData[i];
postSelect.innerHTML += "<option value='" +postObj.postId+ "'>" +postObj.postName+ "</option>" ;
}
}
};
}

Web层代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function searchName() {
var c = document.getElementById( "content" );
c.innerHTML = "" ;
var xhr = createXMLHttpRequest();
var productName = document.getElementById( "name" ).value;
// 判断，如果
if (productName == null || productName == "" ){
return ;
}
xhr.open( "GET" , "${ pageContext.request.contextPath }/searchName?productName=" +productName);
xhr.send( null );
xhr.onreadystatechange = function (){
if (xhr.readyState == 4 && xhr.status == 200){
// 接收值
var name = xhr.responseText;
var names = name.split( "," );
for ( var i=0;i<names.length;i++){
var n = names[i];
c.innerHTML += "<div onmouSEOver='overColor(this)' onmouSEOut='outColor(this)' onclick='setValue(this.innerHTML)' >" +n+ "</div>" ;
}
// 显示
c.style.display = "block" ;
}
};
};
function overColor(div){
div.style.backgroundColor = "red" ;
}
function outColor(div){
div.style.backgroundColor = "white" ;
}
function setValue(val){
document.getElementById( "name" ).value = val;
var c = document.getElementById( "content" );
c.style.display = "none" ;
}







来自为知笔记(Wiz)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同