AJAX：

概念

ASynchronous JavaScript And XML 异步的JavaScript 和 XML
异步和同步：客户端和服务器端相互通信的基础上

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

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

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

实现方式：

原生的JS实现方式（了解）

//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5xmlhttp=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响应状态码是否为200if (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：

概念

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 格式
- 方括号保存数组：[]

获取数据:

json对象.键名
json对象[“键名”]
数组对象[索引]

遍历

//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]);}
}

JavaWeb：Ajax和JSON相关推荐

JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx
JavaWeb笔记:第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx 1. MVC ...
highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...
07【Listener、Ajax、Json】
文章目录 07[Listener.Ajax.Json] 一.监听器 1.1 监听器的类别 1.1.1 监听域对象 1.1.2 监听属性 1.3.3 监听session对象状态 1.2 监听案例 1.2 ...
Ajax、JSON数据和文件上传与下载
JavaWeb 一.Ajax 1.1 概念 1.2 异步与同步 1.3 传统请求与Ajax 1.4 异步的使用场景 1.4 传输数据类型 1.5 Ajax的实现方式 1.5.1 原生的JS实现Ajax ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
api ajax解析json数据库,api ajax解析json数据库
api ajax解析json数据库内容精选换一换华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务 ...
boke例子： freermarker：在使用ajax传递json数据的时候多出冒号
boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...
id jquery 拼接_jquery拼接ajax的json和字符串的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,本文主要介绍了jquery拼接ajax 的json和字符串拼接的方法,这里整理了详细的代码,有需要的小伙伴可以参考下. jQ ...
jQuery、ajax添加Json数据
需求说明: 简单的演示ajax提交json数据. 代码说明: ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立一个html或者jsp页面,引 ...

JavaWeb：Ajax和JSON

AJAX：

概念

实现方式：

JSON：

概念

语法

JavaWeb：Ajax和JSON相关推荐

最新文章

热门文章