AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax包括:
- XHTML和CSS
- 使用文档对象模型(Document Object Model)作动态显示和交互
- 使用XML和XSLT做数据交互和操作
- 使用XMLHttpRequest进行异步数据接收
利用AJAX可以做:
- 注册时,输入用户名自动检测用户是否已经存在。
- 登陆时,提示用户名密码错误
- 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
$.ajax():是jQuery中最底层的Ajax函数。参数接收一个大对象,用对象的键值对表示Ajax请求的相关设置;
①type:表示Ajax请求的方法,可以是get和post
②url:表示请求的后台URL地址
③success:表示请求成功的回调函数,回调函数将接收三个参数,其中第一个参数是请求成功返回的数据。
使用数据是,需要注意返回的数据是JOSN字符串还是JSON对象。
④error:当请求失败时,执行的回调函数
⑤complete:请求完成后,无论成功失败都会调用的函数
⑥statusCode:接收一个对象,对象的键时各种status状态,对象的值表示每种状态码对应的回调函数。
【常见的status状态码】
200-请求成功;404-页面没有找到;500-服务器错误;403-访问被拒绝;
⑦async:设为true表示异步请求(默认),设为false表示同步请求;
⑧data:请求时,向后台传递的数据,是一个对象类型,以键值对的形式分别表示name:value。
⑨dataType:预期返回的数据类型格式。常见的json/text/html
⑩timeout:设置请求超时时间
【js的同源策略】
在js中,当请求其他文件时,要求被请求文件与当前文件,必须处于同一协议名,同一主机名、同一端口号下。
否则,请求不能成功;如过请求非同源文件,必须进行跨域请求设置。
.load:选中当前页面的一个DOM节点,并在当前DOM节点中加载一块html代码片段:
接收的参数:
①可以是一个html文件的地址,表示将整个的html文件加载到当前区域;
$("#div1").load("text.html");
②可以是一个html文件+各种选择器,表示选择该也面的指定区域进行加载
$("#div1").load("text.html h1,#ul{
"name":"zhangsan",
"age":12,
"sex":"nan",
"haobby":[
{
"2":"chi",
"3":"wan",
"4":"dan"
}]
}");
http:超文本传输协议。简单、快捷、灵活、无状态、无连接
URL:统一资源定位符。
组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点
eg:http//192.158.5.123:8080/js/index.php/?name=zaha#top
①IP地址在同一网段是唯一的,如果是在公网中,整个公网的IP是唯一的。
②端口号默认是:80,可以省略不写,常见的端口号:80 Apache 8080 tomcat
③本机IP:localhost 或127.0.0.1
【JSON对象与JSON字符串】
1、JSON对象:JSON对象就是键值对的集合,键与值之间用分号分隔,多对用逗号分隔
注意:JSON对象,要求键必须用“”包裹的字符。 ‘’无效(Java中单引号表示字符)
2、JSON字符串:将JSON对象,用字符串的形式包裹。
3、JSON对象与JSON字符串的相互转换
①对象>字符串 var str=JSON.stringify(obj);
②字符串>对象 var obj=JSON.parse(jsonObj);
jQuery中字符串转对象 $.parseJSON(obj);
4、JSON数组:将多个JSON对象组成数组形式存放,称为JSON数组。
JSON数组可以和JSON对象相互嵌套,也就是说JSON对象的值可以是JSON数组
var jsonArr=[
{
"name":"zhang",
"hobby":[{"2":"chi","3":"kk"}]
},{
"name":"zhang",
"hobby":[{"2":"chi","3":"kk"}]
}
];
$.get:在$.Ajax的基础上,进行封装,默认使用get请求。
接收四个参数:
①请求的后台URl
②传递给后台的数据,对象类型,相当于Ajax中的data属性
③请求成功的回调函数,相当于Ajax中的success
④预期返回的数据类型,相当于Ajax中的dataType
$.getJSON:通过get的方式,请求JSON数据
用于检测网页中所有的Ajax的请求,执行的回调
$(document).ajaxComplete(callback)
$(document).ajaxError(callback)
$(document).ajaxSend(callback)
$(document).ajaxStart(callback)
$(document).ajaxStop(callback)