1.AJAX
2.JSON
一、AJAX
1.概念
Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,
Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
异步提交,局部刷新
ajax的实现:
JS的ajax:出现最早。使用一个对象XMLHttpRequest对象。专门用于进行ajax请求发送,和响应的接收
使用ajax发请求,使用ajax接收响应(难),使用JS进行页面刷新。
1、若使用JS的AJAX技术,为了实现简单功能,就需要书写大量复杂代码。(滑动的效果)
2、JS的AJAX代码,浏览器兼容性比较差。
JQ的ajax:底层封装了JS的ajax代码,做了浏览器的兼容性。程序员仅需要调用简单的JQ的AJAX方法,就可以实现复杂的AJAX功能。
1、少量代码,实现复杂功能
2、浏览器兼容性好,一处编写,处处执行
2.ajax的应用场景
(1)检查用户名是不是已经被注册
很多站点的注册页面都具备自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。
(2)省市二联下拉框联动
很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现 不同的市区的选择,这就是最常见的省市联动效果
(3)内容自动补全
不管是专注于搜索的百度,还是站点内商品搜索的京东,都有搜索功能,在i搜索框输入查询关键字时,整个页面没 有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。
3.jQuery的Ajax
作为JavaScript一个类库,必然也会有响应的ajax的功能,jQuery认为原生ajax过于复杂,所以进行了一次封装(jQuery的二次封装)。 定义多种书写ajax的方式。
要求:先到jQuery类库。也叫脚本文件。
语法
$.ajax({
url:"",
data:{},
type:"",
dataType:"",
success:function(){},
error:function(){}
});
解析:
$.ajax 声明使用的jQuery ajax语法结构
url: 请求的地址
data: 需要发送的数据{} 里面书写json格式的数据 {名字:值,名字:值}
type: 请求类型 get/post
dataType:声明返回数据(响应主体中)的类型/格式
success:执行成功之后调用的方法 等同于 xhr.readyState = 4
error: 执行不等于4 调用的方法。 如果没有错误error可以省略
注意事项:
1、注意不要写错单词。
2、ajax严格区分大小写。
3、data为数据 date为日期 不要写混。
4、冒号一定是英文的。
5、ajax中书写的每一项结尾都要跟随逗号,除最后一个
6、dataType T要大写。
7、$.ajax内的选项不区分顺序。
(1)$.get()
语法结构:
$.get(
"url",
{json数据},
function(obj){},
"返回数据格式"
);
特点:直接使用jQuery ajax中的get发送异步请求。虽然变得写法简单,但是没有error回调函数,出错调试比较考验功底。并且最重要的一条,顺序不能错。
第一个参数是url地址
第二个参数是发送的数据
第三个参数是成功回调的方法
第四个参数是返回值的类型
(2)$.post()
$.post(
"url",
{json数据},
function(obj){},
"返回数据格式"
);
特点:直接使用jQuery ajax中的post发送异步请求。虽然变得写法简单,但是没有error回调函数,出错调试比较考验功底。并且最重要的一条,顺序不能错。
(3)AJAX可以返回的数据类型
XML:早起AJAX都用XML传输数据(被JSON取代)
text:文本格式,字符串格式(所有数据都能用这种格式接收)
HTML:可以直接返回HTML代码
script:脚本代码
JSON:当今最流行的数据回交互方式
JSONP:也是JSON格式,但是支持跨域访问。
4.案例
(1)验证用户名是否已经被注册
1、准备数据