Ajax-XMLHttpRequest对象

来源：互联网发布：daas大数据编辑：程序博客网时间：2024/06/05 16:40

没有xmlhttprequest时，都是采用同步的做法，有了这个对象，进行了异步(比如在填写表单时，服务器会根据你填写的内容，进行马上的验证，而不是所有信息填写完后再验证)

一.创建XMLHttpRequest对象

1.实例化XMLHttpRequest对象

var request = new XMLHttpRequest(); (ie6一下就不支持)
var request = new ActiveXObject("Microsoft.XMLHTTP"); //ie6,ie5

创建请求对象，兼容所有的浏览器function createRequest(){try{request=new XMLHttpRequest();//ie7一下不兼容，其他兼容-XMLHttpRequest()创建请求对象}catch(tryMS){try{request=new ActiveXObject("Msxm12.XMLHTTP");  //绝大多数的ie兼容-ActiveXObject是Microsoft特定的一种编辑对象}catch(otherMS){try{request=new  ActiveXObject("Microsoft.XMLHTTP");// 兼容IE6, IE5}catch(failed){request=null;//创建请求失败}}}return request;//返回一个结果}

二.XMLHttpRequest发送请求

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法

1.发送请求的方法：
(1).open(method,url,async)
规定请求的类型(get/post)、URL(文件在服务器上的位置) 以及是否异步处理请求（async值为true是异步，async值为false是同步）。
(2).send(string)是发送请求

有参数时，仅限post请求。

列子如下：

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

三.XMLHttpRequest取得响应

(1).XMLHttpRequest取得响应的值：1.responseText:获得字符串形式的响应数据2.responseXML：获得XML形式的响应数据3.status和statusText：以数字和文本形式返回HTTP状态码4.getAllResponseHeader()：获取所有的响应报头

5.getResponseHeader()：查询响应中的某个字段的值
四.ajax的三步骤：1、运用HTML和CSS实现页面，表达信息；2、运用XMLHttpRequest和web服务器进行数据的异步交换；
①创建XMLHttpRequest对象
②定义发送请求的类型
③获取数据，以及请求头
④发送请求
⑤监听服务器是否响应
⑥响应成功后的操作
var request = new XMLHttpRequest();//1.创建XMLHttpRequest对象request.open("POST", "server.php");2.发送请求：请求的类型var data = "name=" + document.getElementById("staffName").value                   + "&number=" + document.getElementById("staffNumber").value                   + "&sex=" + document.getElementById("staffSex").value                   + "&job=" + document.getElementById("staffJob").value;request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头request.send(data);//发送请求request.onreadystatechange = function() {if (request.readyState===4) {//监听服务器是否响应if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText;//响应成功后的操作} else {alert("发生错误：" + request.status);}} }

3、运用JavaScript操作DOM，实现动态局部刷新；
4.列子
server.php
<?php//设置页面内容是html编码格式是utf-8header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组$staff = array(array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"));//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法if ($_SERVER["REQUEST_METHOD"] == "GET") {search();} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){create();}//通过员工编号搜索员工function search(){//检查是否有员工编号的参数//isset检测变量是否设置；empty判断值为否为空//超全局变量 $_GET 和 $_POST 用于收集表单数据if (!isset($_GET["number"]) || empty($_GET["number"])) {echo "参数错误";return;}//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。//global 关键词用于访问函数内的全局变量global $staff;//获取number参数$number = $_GET["number"];$result = "没有找到员工。";//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果foreach ($staff as $value) {if ($value["number"] == $number) {$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] .                   "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];break;}}    echo $result;}//创建员工function create(){//判断信息是否填写完全if (!isset($_POST["name"]) || empty($_POST["name"])|| !isset($_POST["number"]) || empty($_POST["number"])|| !isset($_POST["sex"]) || empty($_POST["sex"])|| !isset($_POST["job"]) || empty($_POST["job"])) {echo "参数错误，员工信息填写不全";return;}//TODO: 获取POST表单数据并保存到数据库//提示保存成功echo "员工：" . $_POST["name"] . " 信息保存成功！";}
index.html
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Demo</title><style>body, input, select, button, h1 {font-size: 28px;line-height:1.7;}</style></head><body><h1>员工查询</h1><label>请输入员工编号：</label><input type="text" id="keyword" /><button id="search">查询</button><p id="searchResult"></p><h1>员工新建</h1><label>请输入员工姓名：</label><input type="text" id="staffName" /><br><label>请输入员工编号：</label><input type="text" id="staffNumber" /><br><label>请选择员工性别：</label><select id="staffSex"><option>女</option><option>男</option></select><br><label>请输入员工职位：</label><input type="text" id="staffJob" /><br><button id="save">保存</button><p id="createResult"></p><script>document.getElementById("search").onclick = function() { var request = new XMLHttpRequest();request.open("GET", "server.php?number=" + document.getElementById("keyword").value);request.send();request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { document.getElementById("searchResult").innerHTML = request.responseText;} else {alert("发生错误：" + request.status);}} }}document.getElementById("save").onclick = function() { var request = new XMLHttpRequest();request.open("POST", "server.php");var data = "name=" + document.getElementById("staffName").value                   + "&number=" + document.getElementById("staffNumber").value                   + "&sex=" + document.getElementById("staffSex").value                   + "&job=" + document.getElementById("staffJob").value;request.setRequestHeader("Content-type","application/x-www-form-urlencoded");request.send(data);request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText;} else {alert("发生错误：" + request.status);}} }}</script></body></html>

阅读全文

0 0