Ajax
- Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
XMLHttpRequest
XMLHttpRequest 是 AJAX 的基础
- open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
- setRequestHeader(header,value)
向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
- send(string)
string:仅用于 POST 请求
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
onreadystatechange 事件
- onreadystatechange
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。- readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪- status
200: “OK”
404: 未找到页面
jQuery ajax
jQuery 提供多个与 AJAX 有关的方法。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
- load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
- URL (必需的) 参数规定您希望加载的 URL。
- data (可选的) 参数规定与请求一同发送的查询字符串键/值对集合。
- callback (可选的) 参数是 load() 方法完成后所执行的函数名称。
- get() 从指定的资源请求数据
- $.get(URL,callback);
- URL (必需的) 参数规定您希望请求的 URL。
- callback (可选的) 参数是请求成功后所执行的函数名。
- 第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
- post() 向指定的资源提交要处理的数据 POST 方法不会缓存数据
- $.post(URL,data,callback);
- URL (必需的 参数规定您希望请求的 URL。
- data (可选的) 参数规定连同请求发送的数据。
- callback (可选的) 参数是请求成功后所执行的函数名。
- 第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
- getJSON()
异步加载JSON格式数据
- $.getJSON(url,[data],[callback])
- getScript()
异步加载并执行js文件
- $.getScript(url,[callback])
- ajax()
- 最底层、功能最强大的请求服务器数据的方法
- $.ajax([settings])
- 参数settings 为发送ajax请求时的配置对象,在该对象中:
- url表示服务器请求的路径,
- data为请求时传递的数据,
- dataType为服务器返回的数据类型,
- success为请求成功的执行的回调函数,
- type为发送数据请求的方式,默认为get。
ajaxSetup()
设置全局Ajax默认选项,使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值
- $.ajaxSetup([options])
$.ajaxSetup({ type:"POST", dataType:"json", success:function(data){ console.log(data); } }); $.ajax({ url: "/book/list", });
- $.ajaxSetup([options])
- ajaxStart()和ajaxStop()
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。
- (selector).ajaxStart(function())和 (selector).ajaxStop(function())