写点什么

AJAX 和 JSON 详解

作者:共饮一杯无
  • 2022 年 9 月 23 日
    浙江
  • 本文字数:1833 字

    阅读完需:约 6 分钟

AJAX

概念

AJAX 全称 ASynchronous JavaScript And XML,含义为异步的 JavaScript 和 XML。异步和同步:客户端和服务器端相互通信的基础上


  • 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

  • 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。


Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。所以使用 Ajax 能够很好的提升用户体验。

实现方式

原生的 JS 实现方式(基本不用)

 //1.创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
//2. 建立连接/* 参数: 1. 请求方式:GET、POST * get方式,请求参数在URL后边拼接。send方法为空参 * post方式,请求参数在send方法中定义 2. 请求的URL: 3. 同步或异步请求:true(异步)或 false(同步)
*/xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求xmlhttp.send();
//4.接受并处理来自服务器的响应结果//获取方式 :xmlhttp.responseText//什么时候获取?当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。xmlhttp.onreadystatechange=function(){ //判断readyState就绪状态是否为4,判断status响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); }}
复制代码

JQeury 实现方式

$.ajax()

语法:$.ajax({键值对});


//使用$.ajax()发送异步请求$.ajax({  url:"ajaxServlet1111" , // 请求路径  type:"POST" , //请求方式  //data: "username=jack&age=23",//请求参数  data:{"username":"jack","age":23},  success:function (data) {    alert(data);  },//响应成功后的回调函数  error:function () {    alert("出错啦...")  },//表示如果请求响应出现错误,会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式});
复制代码

$.get():发送 get 请求

语法:$.get(url, [data], [callback], [type])参数:


  • url:请求路径

  • data:请求参数

  • callback:回调函数

  • type:响应结果的类型

$.post():发送 post 请求

语法:$.post(url, [data], [callback], [type])参数:


  • url:请求路径

  • data:请求参数

  • callback:回调函数

  • type:响应结果的类型

JSON

概念

JSON 全称 JavaScript Object Notation,含义 JavaScript 对象表示法 Person p = new Person();p.setName("张三");p.setAge(23);p.setGender("男");var p = {"name":"张三","age":23,"gender":"男"};


  • json 现在多用于存储和交换文本信息的语法

  • 进行数据的传输

  • JSON 比 XML 更小、更快,更易解析。

语法

基本规则

  • 数据在名称/值对中:json 数据是由键值对构成的

  • 键用引号(单双都行)引起来,也可以不使用引号

  • 值得取值类型:

  • 数字(整数或浮点数)

  • 字符串(在双引号中)

  • 逻辑值(true 或 false)

  • 数组(在方括号中) {"persons":[{},{}]}

  • 对象(在花括号中) {"address":{"province":"陕西"....}}

  • null

  • 数据由逗号分隔:多个键值对由逗号分隔

  • 花括号保存对象:使用{}定义 json 格式

  • 方括号保存数组:[]

获取数据

  1. json 对象.键名

  2. json 对象["键名"]

  3. 数组对象[索引]

  4. 遍历


 //1.定义基本格式var person = {"name": "张三", age: 23, 'gender': true};
var ps = [{"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false}];

//获取person对象中所有的键和值//for in 循环/* for(var key in person){ //这样的方式获取不行。因为相当于 person."name" //alert(key + ":" + person.key); alert(key+":"+person[key]);}*/
//获取ps中的所有值for (var i = 0; i < ps.length; i++) { var p = ps[i]; for(var key in p){ alert(key+":"+p[key]); }}
复制代码

JSON 数据和 Java 对象的相互转换

JSON 解析器:常见的解析器:Jsonlib,Gson,fastjson,jackson 现在一般都用 fastjson,因为性能更高。

发布于: 刚刚阅读数: 4
用户头像

鲜衣怒马意气风发,愿你归来仍是少年。 2018.10.19 加入

全栈开发者,CSDN博客专家,51CTO 专家博主,阿里云专家博主,华为云享专家,持续输出干货,欢迎关注。

评论

发布
暂无评论
AJAX和JSON详解_jquery_共饮一杯无_InfoQ写作社区