没有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
index.html<?php //设置页面内容是html编码格式是utf-8 header("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"] . " 信息保存成功!"; }
<!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>
五.ajax简单封装
(1).ajax一般分为简单的四部: 1.创建ajax对象(这里兼容ie的话要做一下处理) 2.连接,即请求对象的open方法(get和post还有点不同,get参数要放在url后面,post要设置请求头) 3.发送,即请求对象的send函数(post参数则放在send里面) 4.接收,在onreadystatechange(存储函数或函数名,每当readyState属性改变时,就会调用该函数。)函数里面处理。 还可以加上超时这些
(2).onreadystatechange分析 要先判断readyState的状态(有四个状态) ①: 0,请求未初始化; ②: 1,服务器连接已建立; ③: 2,请求已接收; ④: 3,请求处理中; ⑤: 4,请求已完成,且响应已就绪 当readyState等于4时,你又要判断status的状态 请求成功时status状态 200-300(不包括300) ,还有304(是缓存)(具体状态可以去参考文档) 在成功(失败)的回掉函数里面将xhr.responseText的值返回出去。
(3).封装代码
'use strict'; var $ = {}; $.ajax = ajax; function ajax(options) { // 解析参数 options = options || {}; if (!options.url) return; options.type = options.type || 'get'; options.timeout = options.timeout || 0; // 1 创建ajax if (window.XMLHttpRequest) { // 高级浏览器和ie7以上 var xhr = new XMLHttpRequest(); } else { //ie6,7,8 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 2 连接 var str = jsonToUrl(options.data); if (options.type === 'get') { xhr.open('get', `${options.url}?${str}`, true); // 3 发送 xhr.send(); } else { xhr.open('post', options.url, true); // 请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 3 发送 xhr.send(); } // 接收 xhr.onreadystatechange = function() { // 完成 if (xhr.readyState === 4) { // 清除定时器 clearTimeout(timer); if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { // 成功 options.success && options.success(xhr.responseText); } else { options.error && options.error( xhr.status ); } } }; // 超时 if (options.timeout) { var timer = setTimeout(function(){ alert("超时了"); xhr.abort(); // 终止 },options.timeout); } } // json转url function jsonToUrl(json) { var arr = []; json.t = Math.random(); for(var name in json) { arr.push(name + '=' + encodeURIComponent(json[name])); } return arr.join('&'); }