ajax/jsonlib

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax/jsonlib，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

**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对象。
@H_403_94@ 直接获取: var xhr = new XMLHttpRequest();-- 支持火狐、谷歌或者IE的高版本的浏览器
@H_403_94@

兼容获取:

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( "大哥！您这是什么浏览器呀！！" );
}
}
}
}
@H_403_94@
* 第二步
* 如果第一步已经获取到了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)
@H_403_94@ * 如果请求方式是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数据格式。
@H_403_94@
2.导入jar包。

3.记住这两个类
@H_403_94@ * 都有一个toString()方法，把JSONObject转换字符串的json的数据格式
* JSONObject---------------------->(用于处理javabean和Map集合)
* 把该类当成Map集合来记。
* 提供的一些方法
@H_403_94@ @H_403_94@ * put(key,value)
@H_403_94@ @H_403_94@ * 静态方法：fromObject(JavaBean)传入进去，返回的JSONObject类 @H_403_94@ @H_403_94@
* JSONArray------------------------>(用于处理list和Array数组类数据)
* 把该类当成List集合来记。
@H_403_94@ @H_403_94@ * add(JavaBean)-- 返回的类似数组的json格式。 @H_403_94@ @H_403_94@ * toString()-- 把JSONArray转发字符串json数据格式 @H_403_94@
@H_403_94@ 注意:如果传入的对象有引用其他对象,可能会引起死循环 @H_403_94@
@H_403_94@ 解决办法:传入参数的时候,传入一个JsonConfig对象进去,这个对象扩滤掉相关的对象 @H_403_94@
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);
@H_403_94@ 4.总结
* jsonlib工具类目的，在服务器端把对象转换成json格式的字符串。
* 提供了两个类
* JSONObject
* put(key,value)
* 静态方法，fromObject(Object)
* toString()

* JSONArray
* add()
* toString()

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

@H_403_94@ 1.具体代码如下 @H_403_94@ AJAX: @H_403_94@
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" ;
}




@H_403_94@


@H_403_94@ 来自为知笔记(Wiz) 原文链接：https://www.f2er.com/ajax/162826.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作