ajax

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)

原文地址:https://www.cnblogs.com/wyu1258/p/9033501.html