一、什么是Ajax?

Ajax = 异步 JavaScript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

二、Ajax工作原理

Ajax是什么?Ajax原理、实现Ajax异步通信完整实例代码。

三、完整代码示例:
1、发送ajax请求的页面(文件名定为:ajax_request.html),代码:
<textarea id="test-response-text">
</textarea>
<script>
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}

function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}

// 发送请求:
request.open('GET', 'ajax_response.html');
request.send();

alert('请求已发送,请等待响应...');
</script>

2、反馈ajax数据的页面(文件名:ajax_response.html),内容:

{data:"success"}

3、将以上代码分别存为.html文件,架起web服务器,放在同一目录下,
当打开ajax_request.html时,会获取到ajax_response.html的内容。

四、详解区分请求类型:GET 或 POST

用GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

GET 请求:
一个简单的 GET 请求:

xmlHttp.open("GET","demo_get.html",true);
xmlHttp.send();

在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

提示:GET请求具有以下的几个特点:
· GET 请求可被缓存
· GET 请求保留在浏览器历史记录中
· GET 请求可被收藏为书签
· GET 请求不应在处理敏感数据时使用
· GET 请求有长度限制
· GET 请求只应当用于取回数据

POST 请求
一个简单 POST 请求:

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据,请使用setRequestHeader() 来添加 HTTP 头。然后在send()方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

提示:POST请求的特点如下:
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求

为什么使用 Async=true ?

我们的实例在 open() 的第三个参数中使用了 “true”。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。
onreadystatechange事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法。
通过把该参数设置为 “false”,可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要,那么可以使用这个参数。

JS代码保护
JS代码可以进行混淆加密,经此保护过的保护,可以防止别人分析、复制、盗用、修改。js混淆加密就用Jshaman(http://www.jshaman.com/