Ajax基础知识

来源：互联网发布：投诉淘宝卖家电话多少编辑：程序博客网时间：2024/04/30 23:53

ajax：一种请求数据的方式，不需要刷新整个页面；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据。

1、创建一个对象

ajax技术的核心是XMLHttpRequest对象(简称XHR)，IE7+及其他标准浏览器都支持原生的XHR对象，在IE6及以下，XHR对象是通过MSXML库中的一个ActiveXObject实现的。
创建XHR对象的兼容写法：

var xhr = null;if (window.XMLHttpRequest) {    xhr = new XMLHttpRequest();} else {    xhr = new ActiveXObject('Microsoft.XMLHTTP');}

另外也可以通过JavaScript中的try…catch来进行异常处理。关于js的try catch应用。

try {    xhr = new XMLHttpRequest();} catch (e) {    xhr = new ActiveXObject('Microsoft.XMLHTTP');}

不用兼容ie6的情况下：

var xhr=new XMLHttpRequest();

2、连接和发送请求

open()

xhr.open('get','1.txt',true);

在使用XHR对象时，要调用的第一个方法是open()，它有3个参数：发送请求的方式 (“get”、”post”等)、请求的URL地址、是否异步发送请求。

GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器；
POST 请求中，在发送数据之前，要设置表单提交的内容类型；
提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码，实际上在参数列表”key=value”的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串，这样是为了拒绝缓存，每次都直接请求到服务器上。

send()

xhr.send();

在调用send()方法后，请求被分派到服务器。

3、接收响应

xhr.onreadystatechange = function() {           if ( xhr.readyState == 4 ) {        if ( xhr.status == 200 ) {            alert( xhr.responseText );        } else {            alert('出错了,Err：' + xhr.status);        }    }}

responseText：响应返回的主体内容，为字符串类型；
responseXML：如果响应的内容类型是 “text/xml” 或 “application/xml”，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；

readyState：ajax请求状态。
——0 （未初始化）还没有调用open()方法；
——1 （载入）已调用send()方法，正在发送请求；
——2 （载入完成）send()方法完成，已收到全部响应内容；
——3 （解析）正在解析响应内容；
——4 （完成）响应内容解析完成，可以在客户端调用了。

onreadystatechange：当readyState改变的时候触发的事件。

status : 服务器请求资源的状态，http状态码。共有五种类型：
——消息（1字头）：代表请求已被接受，需要继续处理。
——成功（2字头）：代表请求已成功被服务器接收、理解、并接受。
——重定向（3字头）：这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
——请求错误（4字头）：这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
——服务器错误（5、6字头）：这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。
常用：
200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
304（从缓存中获取）上面的代码在每次请求的时候都加入了随机数，所以不会从缓存中取值，故该状态不需判断。
404（未找到）服务器找不到请求的网页。

ajax请求是不能跨域的！

4、GET和POST方法比较

Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

区别：
1.GET提交的数据会放在url之后，以‘?’分割URL和传输数据，参数之间以&相连，如‘getnews.php?username=della&age=30’，send（null）；而POST请求则通过send（），作为参数传送数据。
2.GET请求需注意缓存问题，POST请求不需担心这个问题。
3.GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码。
4.GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制。
5.POST请求必须设置Content-Type值为application/x-form-www-urlencoded。
6.GET请求和POST请求在服务器端的区别：在客户端使用GET请求时,服务器端使用Request.QueryString来获取参数,而客户端使用POST请求时,服务器端使用Request.Form来获取参数。

<body>    <label for="txt_username">        姓名:    </label>    <input type="text" id="txt_username" />    <br />    <label for="txt_age">        年龄:    </label>    <input type="text" id="txt_age" />    <br />    <input type="button" value="GET" id="btn_get" onclick="btn_get();" />    <input type="button" value="POST" id="btn_post" onclick="btn_post();" />    <div id="result"></div></body>

GET方法：

function btn_get() {    var xhr= window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;    //添加参数,以求每次访问不同的url,以避免缓存问题。    xhr.open("get", "Server.aspx?username=" + encodeURIComponent(username)        + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());    xhr.onreadystatechange = function () {        if (xhr.readyState == 4 && xhr.status == 200) {            document.getElementById("result").innerHTML = xhr.responseText;        }    }    //发送请求,参数为null    xhr.send(null);}

POST方法：

function btn_post() {    var xhr= window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;    var data = "username=" + encodeURIComponent(username) + "&age=" + encodeURIComponent(age);    //不用担心缓存问题    xhr.open("post", "Server.aspx", true);    //必须设置请求头,否则服务器端收不到参数    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xhr.onreadystatechange = function () {        if (xhr.readyState == 4 && xhr.status == 200) {            document.getElementById("result").innerHTML = xhr.responseText;        }    }    //发送请求,传递data数据    xhr.send(data);}

何时使用Get请求,何时使用Post请求？
GET请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据；POST请求的目的是向服务器发送一些参数,例如form中的内容。

5、实例应用

下面是一个查询员工和添加员工信息的应用：
客户端代码：

<!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+"&"+Math.random());    request.send();    request.onreadystatechange = function() {        if (request.readyState===4) {            if (request.status===200) {                 var data=JSON.parse(request.responseText);                if (data.success) {                    document.getElementById("searchResult").innerHTML = data.msg;                }else{                    document.getElementById("searchResult").innerHTML = '出了错误：'+data.msg;                }            } 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) {                 var data=JSON.parse(request.responseText);                if (data.success) {                    document.getElementById("createResult").innerHTML = data.msg;                }else{                    document.getElementById("createResult").innerHTML = '出了错误：'+data.msg;                }            } else {                alert("发生错误：" + request.status);            }        }     }}</script></body></html>

php：

<?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 '{"success":false,"msg":"参数错误"}';        return;    }    //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。    //global 关键词用于访问函数内的全局变量    global $staff;    //获取number参数    $number = $_GET["number"];    $result = '{"success":false,"msg":"没有找到员工"}';    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果    foreach ($staff as $value) {        if ($value["number"] == $number) {            $result = '{"success":true,"msg":"找到员工：员工编号：' . $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 '{"success":false,"msg":"参数错误，员工信息填写不全"}';        return;    }    //TODO: 获取POST表单数据并保存到数据库    //提示保存成功    echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';}

0 0