本文是AJAX的入门教程，介绍了AJAX的基本概念、创建XMLHttpRequest对象、发送请求及处理响应的过程，包括GET和POST请求的区别。还讨论了AJAX的优缺点以及安全性问题，适合初学者学习。
以下为个人认为有必要记录的笔记 不喜勿喷
AJAX简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
- 不是新的编程语言，而是一种使用现有标准的新方法。
- 允许仅将重要信息发送到服务器而不是整个页面。
- AJAX应用程序与浏览器和平台无关。
AJAX实例
- 要创建AJAX实例，需要使用服务器端语言，例如Servlet，JSP，PHP，的ASP.Net等。
- 创建AJAX的实例步骤：
- 加载org.json.jar文件。
- 创建输入页面以接收任何文本或数字。
- 创建服务器端页面以处理请求。
- 在web.xml文件中提供条目。
AJAX创建 XMLHttpRequest 对象
- XMLHttpRequest 是 AJAX 的基础。
- XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
- XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
- XMLHttpRequest的对象用于客户端和服务器之间的异步通信。
- 它执行以下操作：
- 在后台从客户端发送数据。
- 从服务器接收数据。
- 更新网页而不重新加载。
variable=new XMLHttpRequest();- XMLHttpRequest对象的属性
- XMLHttpRequest对象的方法
XMLHttpRequest请求
- 在以下情况中，请使用POST请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）。
- 向服务器发送大量数据（POST没有数据量限制）。
- 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
- GET请求具有以下的几个特点：
- GET请求可被缓存。
- GET请求保留在浏览器历史记录中。
- GET请求可被收藏为书签。
- GET请求不应在处理敏感数据时使用。
- GET请求有长度限制。
- GET请求只应当用于取回数据。
- POST请求的特点如下：
- POST请求不会被缓存。
- POST请求不会保留在浏览器历史记录中。
- POST请求不能被收藏为书签。
- POST请求对数据长度没有要求。
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST。
- url：文件在服务器上的位置。
- 该文件可以是任何类型的。
- async：true（异步）或 false（同步）。
- XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync参数必须设置为 true。
- 当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。
- 不推荐使用async=false。
- 当使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到send()语句后面即可。
- XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync参数必须设置为 true。
send(string)
将请求发送到服务器。
- string：仅用于 POST 请求。
setRequestHeader()
如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader(header,value)来添加 HTTP 头。
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
- header: 规定头的名称。
- value: 规定头的值。
AJAX服务器响应
HTTP 响应是由服务端发出的。
获得来自服务器的响应
responseText
获得字符串形式的响应数据。
- 如果来自服务器的响应并非 XML，请使用responseText属性。
- responseText属性返回字符串形式的响应。
- 对于responseText属性，只有当 readyState属性值变为4时，responseText属性才可用，因为这表明AJAX请求已经结束。
responseXML
获得 XML 形式的响应数据。
- 来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用responseXML属性。
AJAX onreadystatechange 事件
捕获请求的状态，继而实现响应。
- 每当readyState改变时，就会触发onreadystatechange事件。
- readyState属性存有 XMLHttpRequest 的状态信息。
- readyState状态说明
- 0：请求未初始化
+值为0表示对象已经存在，否则浏览器会报错：对象不存在。 - 1：服务器连接已建立
- 调用open()方法，根据参数（method,url,true）完成对象状态的设置。
- 并调用send()方法开始向服务端发送请求。
- 值为1表示正在向服务端发送请求。
- 2：请求已接收
- 接收服务器端的响应数据。
- 但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。
- 值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。
- 3：请求处理中
- 解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。
- 状态3表示正在解析数据。
- 4：请求已完成，且响应已就绪
- 确认全部数据都已经解析为客户端可用的格式，解析已经完成。
- 值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。
- 0：请求未初始化
onreadystatechange事件
规定当服务器响应已做好被处理的准备时所执行的任务。
- 当readyState等于 4 且状态为 200 时，表示响应已就绪。
- XHR.readyState状态的变化如下：
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。
使用回调函数
是一种以参数形式传递给另一个函数的函数。
AJAX XML
AJAX XML 实例
var xhr;
//适用于大多数现代Web浏览器
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
//对于IE5,IE6
else(window.ActiveXObject){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
（此处按需求写代码） }
}
AJAX提交form表单方法
AJAX提交表单分为两种
- 无返回结果的，就是把表单数据直接提交给后台，让后台直接处理；
- 最简单的就是$(“#formid”).submit();直接将form表单提交到后台。
- 返回有结果的，这种情况下，后台不管是执行成功还是失败，最终的信息都需要返回到前台。
- ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。
AJAX提交表单有返回结果的有两种实现方式
将form表单数据序列化
$.ajax({
type: "POST",
url:your-url,
data:$('#yourformid').serialize(),
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
//接收后台返回的结果
}
});
- 使用这种方法的前提是form表单中的项一定要有name属性，后台获取的键值对为 key=name 值，value=各项值。
- ajax()中的async为false，填写表单的时候不需要实时发送，等用户填写完所有信息按提交按钮即可。
通过窗口查找form提交
var obj = document.getElementById("xx_iframe").contentWindow;
obj.$("#yourform").form("submit",{
success :function(data){
//对结果处理
}
});
- form表单都必须要有name属性。
4种常用的Ajax请求方式
$.ajax()返回其创建的 XMLHttpRequest 对象
$.ajax({
type: "POST",
url:your-url,
dataType: "json",
data:$('#yourformid').serialize(),
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
//接收后台返回的结果
}
});
- $.ajax() 只有一个参数：参数key/value对象，包含各配置及回调函数信息。
- 如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 “text/xml”)。
通过远程 HTTP GET 请求载入信息
$.get(
"test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
- GET请求功能显得更加简单，请求成功时可调用回调函数，请求失败是没有可调用的回调函数的。
- 当然如果需要在出错时执行函数，那么还请使用$.ajax。
通过远程 HTTP POST 请求载入信息
$.post(
"/Resources/addfriend.ashx",
{ "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("添加成功！");
}
}
)
- POST请求功能也相对比较简单，请求成功时可调用回调函数，请求失败是没有可调用的回调函数的。
- 如果需要在出错时执行函数，那么请使用$.ajax请求。
通过 HTTP GET 请求载入 JSON 数据
$.getJSON( "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(
data.items,
function(i,item){
$("").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
}
);
});
使用AJAX存在的问题
- 增加复杂性
- 服务器端开发人员需要了解HTML客户端页面以及服务器端逻辑中将需要表示逻辑。
- 页面开发人员必须具备JavaScript技能。
- 基于AJAX的应用程序可能难以调试，测试和维护
- JavaScript很难测试 - 自动测试很难。
- JavaScript中的模块化程度较弱。
- 尚缺乏设计模式或最佳实践指南。
- 具包/框架尚未成熟
- 他们中的大多数都处于测试阶段。
- 尚未标准化XMLHttpRequest
- IE的未来版本将解决这个问题。
- 旧浏览器中不支持XMLHttpRequest
- iframe会有所帮助。
- JavaScript技术依赖性和不兼容性
- 必须启用应用程序才能运行。
- 仍然存在一些浏览器不兼容性。
- JavaScript代码对黑客可见
- 设计糟糕的JavaScript代码可能会引发安全问题。
AJAX安全性分析
- 服务器端
- 基于AJAX的Web应用程序使用与常规Web应用程序相同的服务器端安全方案。
- 可以在web.xml文件或程序中指定身份验证，授权和数据保护要求。
- 基于AJAX的Web应用程序受到与常规Web应用程序相同的安全威胁。
- 客户端
- JavaScript代码对用户/黑客可见。黑客可以使用JavaScript代码来推断服务器端的弱点。
- JavaScript代码从服务器下载并在客户端执行（“eval”），并可能通过恶意代码破坏客户端。
- 下载的JavaScript代码受到沙盒安全模型的约束，可以放宽签名的JavaScript。
写在后面
关于AJAX的入门知识，在小白的情况下阅读了一遍，大致有所了解，从中拓展出的ASP、PHP、HTTP、JSON、XML、XML DOM真让人头大，还有介么多东西/(ㄒoㄒ)/~~
打算下一步从HTTP和JSON入手了，以此度过今夜良宵✊。
同样的话：若是发现有错误欢迎大噶纠正！我也会及时弄清改正的！希望没有误导到可爱的你?。
加油加油！继续冲鸭！
扫一扫
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
