ajax

Posted 2020-11-05 wyu1258

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)