Ajax的简单实现

对于Ajax的介绍，这里就不在赘述了，下面简单的来实现一下Ajax的异步操作。

get请求：

<script type="text/javascript"> function createXMLHttpRequest() { /*创建XMLHttpRequest对象 */ try { /*大部分浏览器通过此创建*/ return new XMLHttpRequest(); } catch (e) { try { /*IE6.0*/ return ActvieXObject("Msxml2.XMLHTTP"); } catch (e) { try { /*IE5.5及更早版本*/ return ActvieXObject("Microsoft.XMLHTTP"); } catch (e) { throw e; } } } } window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { //获取XMLHttpRequest对象 var xmlHttp = createXMLHttpRequest(); /* 参数1:请求的方式 参数2:请求的路径 参数3:布尔值：true为异步请求 false为同步请求 */ xmlHttp.open("GET", "请求路径", "true"); xmlHttp.send(null); xmlHttp.onreadystatechange = function() { /* xmlHttp.readyState的值有0,1,2,3,4 0状态：刚创建，调用open方法前; 1状态：请求开始：调用了open()方法，但还没有调用send()方法 2状态：调用完了send()方法了； 3状态：服务器已经开始响应，但不表示响应结束了！ 4状态：服务器响应结束 */ if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应结束 var text = xmlHttp.responseText; // 获取元素 var h1 = document.getElementById("ID名"); h1.innerHTML = text; } } } } </script>

Post: 1：修改请求方式

xmlHttp.open("post", "请求路径", "true");

2：设置请求头

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3：发送时指定请求体

xmlHttp.send("username=123”&password=321"); //目前里面写的参数为随机举例

Post请求完整代码：

<script type="text/javascript"> function createXMLHttpRequest() { /*创建XMLHttpRequest对象 */ try { /*大部分浏览器通过此创建*/ return new XMLHttpRequest(); } catch (e) { try { /*IE6.0*/ return ActvieXObject("Msxml2.XMLHTTP"); } catch (e) { try { /*IE5.5及更早版本*/ return ActvieXObject("Microsoft.XMLHTTP"); } catch (e) { throw e; } } } } window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { //获取XMLHttpRequest对象 var xmlHttp = createXMLHttpRequest(); /* 参数1:请求的方式 参数2:请求的路径 参数3:布尔值：true为异步请求 false为同步请求 */ xmlHttp.open("POST", "请求路径", "true"); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send("username=123”&password=321"); xmlHttp.onreadystatechange = function() { /* xmlHttp.readyState的值有0,1,2,3,4 0状态：刚创建，调用open方法前; 1状态：请求开始：调用了open()方法，但还没有调用send()方法 2状态：调用完了send()方法了； 3状态：服务器已经开始响应，但不表示响应结束了！ 4状态：服务器响应结束 */ if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应结束 var text = xmlHttp.responseText; // 获取元素 var h1 = document.getElementById("ID名"); h1.innerHTML = text; } } } } </script>