初学Ajax(一)
以下文字根据李炎恢——jQuery教程整理而成。
Ajax全称为：“Asynchronous JavaScript and XML”（异步JavaScript和XML），它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
Ajax概述
Ajax这个概念是由Jesse James Garrett在2005年发明的。它本身不是单一技术，是一串技术的集合，主要有：
- JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
- XMLHttpRequest对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求
- 服务器上的文件，以XML、HTML或JSON格式保存文本数据
- 其它JavaScript，解释来自服务器的数据（比如PHP从MySQL获取的数据）并将其呈现到页面上
由于Ajax包含众多特性，优势与不足也非常明显。优势主要以下几点：
- 不需要插件支持（一般浏览器且默认开启JavaScript即可）
- 用户体验极佳（不刷新页面即可获取可更新的数据）
- 提升Web程序的性能（在传递数据方面做到按需发送，不必整体提交）
- 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）
而Ajax的不足有以下几点：
- 不同版本的浏览器对XMLHttpRequest对象支持度不足(比如IE5之前)
- 前进、后退的功能被破坏（因为Ajax永远在当前页，不会记住前后页面）
- 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）
- 开发调试工具缺乏（相对于其他语言的工具集来说，JS或Ajax调试开发少的可怜）
异步和同步
使用Ajax最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？我们普通的Web程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web页面出现假死状态，所以，一般Ajax大部分采用异步模式。
load方法
jQuery对Ajax做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层，有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。
.load()方法可以传递三个参数：url(必须，请求html文件的url地址，参数类型为String)、data(可选，发送的key/value数据，参数类型为Object)、callback(可选，成功或失败的回调函数，参数类型为函数Function)。
如果想让Ajax异步载入一段HTML内容，我们只需要一个HTML请求的url即可。
Ajax.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
要异步加载的数据，test.html：
<span class="title">瓢城web俱乐部</span>
<span class="url">www.ycku.com</span>
jQuery代码：
$("input").click(function() {
$("#box").load("test.html");
});
如果想对载入的HTML进行筛选，那么只要在url参数后面跟着一个选择器即可。
$("input").click(function() {
$("#box").load("test.html .url"); //带选择器的url
});
如果是服务器文件，比如.php(妈的，没学过啊)。一般不仅需要载入数据，还需要向服务器提交数据，那么我们就可以使用第二个可选参数data。向服务器提交数据有两种方式：get和post。
$("input").click(function() {
$("#box").load("test.php?url=ycku"); //不传递data，则默认get方式
});
get方式接受的PHP(没学过php，这是一个问题)
<?php
if($_GET['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
$("input").click(function() {
$("#box").load("test.php", { //传递data，则为post方式
url:"ycku"
});
});
post方式接受的PHP：
<?php
if($_POST['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
在Ajax数据载入完毕之后，就能执行回调函数callback，也就是第三个参数。回调函数也可以传递三个可选参数：responseText（请求返回）、textStatus（请求状态)、 XMLHttpRequest（XMLHttpRequest 对象）。
jQuery代码如下：
$("input").click(function() {
$("#box").load("test.php", {
url:"ycku"
}, function(response, status, xhr) {
// alert(response); //返回响应
// $("#box").html(response+"123");
// alert(status);
// if(status == "success") {
// alert("成功后的处理");
// }
// alert(xhr.responseText); // xhr.responseText等价于response
// alert(xhr.responseXML); //undefined
// alert(xhr.status); //200
alert(xhr.statusText); //OK
});
});
注意：status得到的值， 如果成功返回数据则为：success，否则为：error。XMLHttpRequest对象属于JavaScript范畴，可以调用一些属性如下：
| 属性名 | 说明 |
| responseText | 作为响应主体被返回的文本 |
| responseXML | 如果响应主体内容类型是“text/xml”或“applicaton/xml”，则返回包含响应数据的XML DOM文档 |
| status | 响应的HTTP状态 |
| statusText | HTTP状态的说明 |
如果成功返回数据，那么xhr对象的statusText属性则返回'OK'字符串。除了'OK'的状态字符串，statusText属性还提供了一系列其他的值，如下：
| HTTP状态码 | 状态字符串 | 说明 |
| 200 | OK | 服务器成功返回了页面 |
| 400 | Bad Request | 语法错误导致服务器不识别 |
| 401 | Unauthorized | 请求需要用户认证 |
| 404 | Not found | 指定的URL在服务器上找不到 |
| 500 | Internal Server Error | 服务器遇到意外错误，无法完成请求 |
| 503 | ServiceUnavailable | 由于服务器过载或维护导致无法完成请求 |
初学Ajax(一)的更多相关文章
- 初学Ajax(三)
$.ajax() $.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表 ...
- 初学Ajax(二)
$.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.loa ...
- 初学Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...
- 初学 Ajax（涉及 php)
一直知道 ajax 但是尚未真正了解, 这次看了慕课网的<Ajax全接触>,算是有所收获,入了个门. 需要用到php,因为 Ajax也是向服务器请求(不知道这么解释对不对), 所以还需要配 ...
- 关于AJAX使用中出现中文乱码的问题
自己初学AJAX,遇到一个棘手的bug就是xmlHttp.open("get",url,false);url里面有中文,结果出现乱码.不过最后在百度,和诸位博主的帮助下,成功解决了 ...
- jQuery Ajax请求 .net 一般处理程序
初学ajax 一个简单的功能,调试了2个小时,代码如下虽然成功了 但是有错误 <!DOCTYPE html> <html> <head> <meta http ...
- 使用Ajax时[object%20object] 报错的解决方案
踩坑经过 最近初学Ajax,当我想把Ajax应用到自己项目中的时候,没有达到理想的效果,还报了如下错误: 点击图中报错,产生报错页面如下: 当时写的Ajax如下: // 提交修改密码表单 $(&quo ...
- 2014年5月份第4周51Aspx源码发布详情
最基本wcf服务器与客户端交互源码 2014-5-26 [VS2003]源码描述:本示例讲解的是最基本的wcf语法,示例浏览请先运行服务端,然后在运行客户端,适合想要学习wcf的初学者.仅供借鉴,欢 ...
- JS实现仿腾讯微博无刷新删除微博效果代码
这里演示JS仿腾讯微博无刷新删除效果,将显示在微博列表里的内容删除,运用AJAX技术,无刷新删除微博的内容,参考性强,希望对初学AJAX的朋友有所帮助. 在线演示地址如下: http://demo.j ...
随机推荐
- iOS开发之Pch预编译文件的创建
在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一个头文件,pch头文件的内容能被项目中的其他所有源文件 ...
- 自定义Drawable
本文由 伯乐在线 - treesouth 翻译,toolate 校稿.未经许可,禁止转载! 英文出处:ryanharter.com.欢迎加入翻译小组. 我们看过一些博客文章,讲述了为什么要适时地使用自 ...
- MySQL命令输入错误 取消命令
mysql命令行输入错误字符需要取消执行时,可在分号“:”出现前输入“\c”来取消该条命令,注意c前边的“\”. 1 2 3 4 mysql> select -> user() -&g ...
- sharepoint 2010 切换域
前提: 现在已经有一个sharepoint 2010的环境,当前域为contosoA.com,有个需求需要将这个域切换到域contosoB.com.下面是成功操作的步骤. 1.数据最重要 备份所有数据 ...
- [DHCP服务]——DHCP详解
DHCP:(Dynamic Host Configuration Protocol) 动态主机配置协议 1. DHCP是一个局域网的网络协议,采用UDP协议工作 2. DHCP作用 (1)主要应用在大 ...
- 如何设置potplayer播放时总在最前端
1.测试平台:potplayer 64位 2.步骤:在播放器界面上点击右键->选项->基本->最前端方式-选播放视频时在最前端(或是总在最前端) 3.选择:基本->最前端方式- ...
- 基于.net mvc的校友录（五、web.config对的配置以及filter实现的权限控制）
web.config配置文件 此文件是整个系统的配置中心,它告诉iis服务器本网站需要哪些运行时环境,需要哪些环境,将要进行哪些操作,开发人员也会将一个常量性的数据放在此配置中,以备系统全局调用.此文 ...
- 使用Log Explorer查看和恢复数据
由于一次意外操作,把QC数据库中的BUG表数据给删掉了.崩溃-上网找了下恢复方法,找到一款Log Explorer.下载安装使用后,发现这款软件的确不错,收藏ing. 本次的使用的Log Expl ...
- 轻松解决在一个虚拟主机上运行多个 ASP.NET 网站应用
不知道有没有朋友像我一样会遇到这样一个问题: 在网上购买 .NET 空间,由于虚拟主机的限制,你并不能把某个目录设为一个独立的应用,或者一些价格比较高的空间,虽然可以设置,但数量也是有限的.这个问题导 ...
- UITableView基本使用和cell的属性
在ios的UI中UITableView是个常用且强大的控件 基本使用: 1>设置代理,一般把控制器设为代理:self.tableView.delegate = self; 2>遵守代理的协 ...