Ajax与Json入门与进阶

最新推荐文章于 2024-05-31 14:49:19 发布

青瓜与孤独

最新推荐文章于 2024-05-31 14:49:19 发布

阅读量97

点赞数

分类专栏： Web 文章标签： json ajax

本文链接：https://blog.csdn.net/qq_44828283/article/details/110500107

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax简介：

Ajax全称："Asynchronous Javascript and XML"简单的理解就是:
无需重新加载整个网页的情况下，可以更新部分网页的技术
特点：1)可以刷新局部页面的数据 2)不需要等待上一次服务器相应就
可以进行下一步操作。

原生Ajax

虽然现在原生的Ajax使用的已经很少了，但是我们还是要了解一下的。

原生Ajax使用分四步走：
1.创建Ajax对象
  var xhr = new XMLHttpRequest();//IE5,6浏览器不支持该创建
2.请求准备：
  xhr.open(method,url,async);
  参数：
  method:请求的方式(get|post)
     url:请求路径(若为get请求可以加上参数?key=value&key=value)
  async:是否异步(true异步|false同步)
3.回调函数(处理页面js操作)
  xhr.onreadystatechange=function(){
     //js操作
     注意：此时的onreadystatechange有四个状态后图
     //一般我们在状态为4和响应正常的话才会执行js
     if(xhr.readState==4&&status==200){
     //js操作
     }
}
4.发送请求
xhr.send()
！回调函数每当状态改变一次就执行一次

在这里插入图片描述
案例：用户名可用不可用验证(java语言):

服务端：
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/demo01")
public class ServletDemo01 extends HttpServlet {
protected void service(HttpServletRequest req,
HttpServletResponse resp) throws ServletException,
IOException {
resp.setContentType("text/html;charset=utf-
8");
req.setCharacterEncoding("utf-8");//设置编码
String name = req.getParameter("name");//获取前端页面传递的用户名
if("admin".equals(name)) {
//用户名不唯一
resp.getWriter().print("<font color='red'>用户名已注册</font>");
}else {
//用户名唯一
resp.getWriter().print("<font color='green'>用户名可以使用</font>");
}
}
}
----------------------------------------------------------
前端
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkName(obt){  //设置失去焦点事件
//发送异步请求
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.请求准备 open()
xhr.open("get","demo01?name="+obt.value,true);
//3.添加事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//js操作
var data = xhr.responseText;//获取服务器响应的数据
//将服务器响应的数据显示到文本框后的span中
document.getElementById("name_msg").innerHTML=data;
}
}
//发送请求
xhr.send();
}
</script>
</head>
<body>
用户名:<input name="username" id="d1"
onblur="checkName(this)"/><span id="name_msg"></span>
</body>
</html>

Jquery的Ajax

$.Ajax({});
常用的参数：
url:请求路径
data:请求参数 格式 key=value&key=value 或者
{"key":value,key:value}
dataType:服务器返回的数据格式
xml,html,json,jsonp,text,script
type:请求方式 get（默认）|post
async:是否异步 true（默认值）异步|false:同步
success: function(obj){} 请求成功后的回调函数 obj表示
服务器返回的数据
error:function(XMLHttpRequest, textStatus,
errorThrown){} 请求发生错误时的回调函数，XMLHttpRequest
异步对象 textStatus： 错误信息、
errorThrown（可选）捕获的异常对象。
=====写法
$.ajax({
url:"",
data:{},
dataType:"",
type:"",
success:function(obj){
}
});
===============================================
$.get(url, [data], [callback], [type]);//发送get方式
的异步请求
$.post(url, [data], [callback], [type])//发送post方式
的异步请求
url:请求领
data:参数
callback：回调函数
type:服务器返回的数据类型
===注意：参数的顺序不能随意写,以上的两个方法只能发送异步
的请求.

用户名唯一验证：

$(function(){
$("#d1").blur(function(){
$.post(
"demo02",
{"name":$(this).val()},
function(obt){
if(obt=="true"){
//可以使用
$("#name_msg").html("√").css("color","green");
}else{
//不可以使用
$("#name_msg").html("×").css("color","red");
}
},
"text");
});
});

Json

JSON(JavaScript Object Notation) 是一种轻量级的数
据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
===使用：
总体而言：
对服务器而言:json就是符合json格式的字符串而已
对js而言：json就是一个key/val形式的键值对或者数组
==格式：
1.对象格式:{key:value,key:value...}
2.数组格式:[value1,value2,value3...]
3.混合形式:[{},{},{}]
boolean:true|false
在调用的时候只需要json对象.属性名或者json对象["属性名"]

基本使用代码示例：
@WebServlet("/demo03")
public class ServletDemo03 extends HttpServlet {
protected void service(HttpServletRequest req,
HttpServletResponse resp) throws ServletException,
IOException {
resp.setContentType("text/html;charset=utf-
8");
req.setCharacterEncoding("utf-8");
/* String json = "{\"id\":12,\"name\":\"张飒
\"}"; */
/* String json = "[\"呵呵\",\"哈哈\",\"嘿嘿
\",\"嘻嘻\",\"嘎嘎\"]"; */
String json="[{\"id\":12,\"name\":\"张飒\"},
{\"id\":13,\"name\":\"张飒1\"}]";
Student s= new Student("黑娃","1.jpg","吃
煤","2019-12-1",0);
//resp.getWriter().print(json);
resp.getWriter().print(s);
}
}
==页面
<script type="text/javascript"
src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"demo03",
type:"get",
dataType:"json",
success:function(obt){
//alert(obt["id"]+","+obt["name"]);
//alert(obt[0]);
/* $(obt).each(function(i,dom){
console.log(dom["id"]+","+dom["name"]);
}); */
alert(obt);
},
error:function(xhr,statuText){
alert(statuText);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
</body>

======当服务器给js页面返回一个javaBean对象|集合对象的时
候，解析错误,因此我们需要借助第三方工具完成Json格式的解析
======解析：jackson解析
1.导包
jackson-annotations-2.5.0.jar
jackson-core-2.5.0.jar
jackson-databind-2.5.0.jar
2.使用
//创建解析器
ObjectMapper mapper = new ObjectMapper();
//将对象解析成json格式的字符串
String json = mapper.writeValueAsString(Object obj);

Ajax中的表单序列化

序列表表格内容为字符串。将表单中的name属性值作为key值,表
单中的值作为value值，以key=value&key=value....形式的一
个字符串，就是所谓的表单序列化
==使用方式：
表单对象.serialize();
在向后端传递数据的时候不需要传递每一个值，只需要将整个表单
的数据传递过去即可(需要有name属性)
//servlet后端进行接收数据
req.getParameter("name");

青瓜与孤独

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax与Json入门与进阶

Ajax简介：Ajax全称："Asynchronous Javascript and XML"简单的理解就是:无需重新加载整个网页的情况下，可以更新部分网页的技术特点：1)可以刷新局部页面的数据 2)不需要等待上一次服务器相应就可以进行下一步操作。原生Ajax虽然现在原生的Ajax使用的已经很少了，但是我们还是要了解一下的。原生Ajax使用分四步走：1.创建Ajax对象 var xhr = new XMLHttpRequest();//IE5,6浏览器不支持该创建2.请求准备：
复制链接

扫一扫