1. 什么是Ajax?
Ajax是“Asynchronous Javascript And XML(异步Javascript和XML)”的缩写, 是指一种创建交互式网页应用的网站开发技术。
Ajax不是一种新的编程语言, 而是一种用于创建更好、更快以及交互性更强的web应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、 XHTML和CSS、DOM、XML和XMLHttpRequ。
Ajax可以在不重新加载整个页面的情况下, 与服务器交换数据。这种异步交互的方式, 使用户单击后, 不必刷新页面也能获取新数据。 使用Ajax, 用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
1.1 Ajax原理
通过XTML和CSS来实现页面, 表达信息。
通过浏览器的XmlHttpRequest(Ajax引擎)对象, 来向服务器发送异步请求, 并接收服务器的响应数据, 然后用javascript来操作DOM, 实现动态局部刷新。
1.2 Ajax的优点和不足之处。
优点:
使用Ajax的最大优点, 就是能在不更新整个页面的前提下维护数据。
这使得web应用程序更为迅捷地响应用户动作, 并避免了在网络上发送那些没有改变的HTML代码信息。
1. 减轻服务器负担, 按需要获得数据。
2. 无刷新更新页面, 减少用户的实际和心理的等待时间。
3. 更好的用户体验。
4. 减轻宽带的负担。
5. 主流浏览器支持。
不足:
1. Ajax的程序必须测试针对各个浏览器的兼容性。
2. Ajax更新页面内容的时候并没有刷新整个页面, 因此, 网页的后退功能是失效的。
3. 对搜索引擎支持不好。
1.3 Ajax实现过程
第一步: Javascript监听浏览器网页事件(例如:点击, 提交, 更改等)。
第二步: 由Javascrip创建Ajax引擎对象。
第三步: 通过Ajax引擎对象发出请求。
第四步: Ajax引擎等待并且接收服务器的响应内容
第五步: Javascript再从“Ajax引擎对象”中获取响应内容, 并且通过DOM改变网页界面显示效果。
2. jQuery的load()方法
jQuery load()方法是简单但强大的AJax方法。
load() 方法从服务器加载数据, 并把返回的数据放入被选元素中。
语法:
$("selector").load(URL, data, callback);
第一种情况:
$("#btn").click(function(){ //只传一个URL, 表示在id为new-projectsd的元素加载index.html $("#new-projects").load("./index.html") })
第二种情况:
$("btn").click(function () { // 只传一个URL, 导入的index.html文件含有多个传递参数, 类似于: index/html?name=yang&age=12 $("#new-projects").load("./index.html", {"name": "yang", "age":12}); });
第三种情况:
$("btn").click(function () { // 如果加载成功,则会执行回调函数 $("#new-projects").load("./index.html", {"name": "yang", "age":12}, function () { alert("load执行成功!"); }); });
3. jQuery的getJSON方法
jQuery的Ajax中使用getJSON()方法, 异步加载JSON格式数据。
获取服务器中的数据, 并对数据进行解析, 显示到页面中。
语法:
$,getJSON(url, [data], [callback]);
参数(url): 为请求加载json格式文件的服务器地址。
参数(data): 可选, 为请求时发送的数据。
参数(callback): 为数据请求成功后执行的函数。
$.getJSON("./data/getJSON.json", function (data) { var str=""; //初始化保存内容变量 $.each(data, function (index, ele) { $("ul").append("<li>"+ele.name+"</li>>") }) })
4. jQuery的$.get()方法
语法:
$.get(URL, callback);
参数(URL): 必选, 规定请求的路径。
参数(callback): 数据请求成功后执行的函数。
作用:通过HTTP GET请求从服务器上请求数据。
$.get("./data/getJSON.json", function (data, status) { console.log(status); })
5. jQuery的post()方法
语法:
$.post(URL, data, callback);
参数(URL): 必选, 规定请求的路径。
参数(data): 可选, 连同请求发送的数据。
参数(callback):可选, 数据请求成功后执行的函数。
作用: 以POST方式向服务器发送数据, 服务器接收到数据之后, 进行处理, 并将处理结果返回页面。
$.post("/index", {name: "zhang"}, function (data, status) { console.log(status); })