AJAX的应用_open(method,url,asyn)-CSDN博客

本文链接：https://blog.csdn.net/maoye198602102339/article/details/84146611

AJAX的原理

--Asynchronous JavaScript and Xml异步的JavaScript和Xml

--AJAX是一种用来改善用户体验的技术，实质是使用XMLHttpRequest对象异步的向服务器发请求

--服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容

再使用AJAX之前，首先要创建XMLHttpRequest对象

XMLHttpRequest对象会涉及到浏览器兼容性的问题

IE 5.5 和 6 ：需要new 一个 ActiveXObject（“microsoft.XMLHttp”）注意大小写一定不要错

IE 7.8.9一键chrome，firefox等：只需要直接 new XMLHttpRequest就可以了

以下是一段测试浏览器的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //创建XMLHttpRequest对象
        function createXHR() {
            var xhr = null;
            //判断浏览器的支持度
            if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("microsoft.XMLHttp");
            }
            return xhr;
        }

        function chickMe() {
            window.alert(createXHR());
        }
    </script>
</head>
<body>
    <input type="button" value="click me" onclick="chickMe()">
</body>
</html>

AJAX对象属性和方法

方法

1、open（method，url，asyn）

------asyn：bool类型，表示是同步(false)还是异步（true）提交，默认为true

2，send（body）

------发送请求，body是请求体，当请求体方式为get的时候，body必须为null，当请求体为post的时候，body

为具体的提交数据格式，为：“key=value&key1=value1&key2=value2”

3，setRequestHeader（）

------指定请求消息头，什么时候用？当请求为post时，必须使用setRequestHeader重新设置消息头，否则请求数据获取不到

属性

1，onreadystatechange

------当准备状态改变的时候，要调用的函数（回调函数）是哪个

2，readyState

------请求状态，请求状态必须为以下5种状态之一

0：尚未初始化

1：初始化完成，正在发送请求

2：请求完成

3：正在接受响应数据

4：数据接收响应成功

注意：readyState为4的时候，可以处理响应数据

3，status

------由服务器返回的状态码

200：请求成功

404：资源未找到

500：服务器内部错误

4，responseText

------服务器返回的文本

5，responseXML

------服务器返回的XML文本

发送异步请求的的步骤

1，获取（创建）Ajax对象，获取XMLHttpReaquest对象

2，创建请求：调用open的方法

3，设置回调函数：指定onreadystatechange事件

4，发送请求：调用send方法

首先，我们使用ajax用get请求模拟一下判断用户名称的例子：

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/ajax.js"></script>
</head>
<body>
    用户名称：<input type="text" id="nameTxt">
    <span id="Tip">*</span>
</body>
</html>

ajax.js

/**
 * @author lxg
 * @date 2018-12-10 上午 08:58
 */

//窗户ajax对象
function createXhr(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject("microsoft.XMLHttp");
    }
}


$(document).ready(function () {
    $("#nameTxt").blur(function () {
        //1、获取ajax对象
        var xhr = createXhr();
        //2、创建请求
        var name = $("#nameTxt").val();
        var url = "server.php?name="+name;
        xhr.open("get",url,true);
        //3、设置回调函数
        xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 && xhr.status == 200){
                $("#Tip").html(xhr.responseText);
            } 
        }
        //、发送请求
        xhr.send(null);
    });
});

server.php



<?php
    $name = $_REQUEST["name"];
    if($name == "admin"){
        echo "用户名称已经存在！";
    }else{
        echo "通过！";
    }
?>

结果：

接着，我们使用ajax用post请求模拟一下判断用户名称的例子：

套用前面的例子：把ajax.js稍做修改一下

/**
 * @author lxg
 * @date 2018-12-10 上午 08:58
 */

//窗户ajax对象
function createXhr(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject("microsoft.XMLHttp");
    }
}


$(document).ready(function () {
    $("#nameTxt").blur(function () {
        //1、获取ajax对象
        var xhr = createXhr();
        //2、创建请求
        var name = $("#nameTxt").val();
        var url = "server.php";
        xhr.open("post",url,true);
        //3、设置回调函数
        xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 && xhr.status == 200){
                $("#Tip").html(xhr.responseText);
            } 
        }
        //、发送请求
        xhr.send("name="+name);
    });
});

运行结果如下：

错误信息是php页面的第四行，按name接收不到客户端的数据

是因为

只要在ajax.js里面设置一下，Content-Type就可以了。修改后代码如下:

加上这句代码就可以了！

从数据库查找用户名是否存在的例子

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/ajax.js"></script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>用户名称：</td>
                <td>
                    <input id="userName">
                </td>
                <td>
                    <div id="userNmaeTip">*</div>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input id="userPassword">
                </td>
                <td>
                    <div id="userPasswordTip">*</div>
                </td>
            </tr>
            <tr>
                <td>用户昵称：</td>
                <td>
                    <input id="userNicheng">
                </td>
                <td>
                    <div id="userNichengTip">*</div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

2、ajax.js

/**
 * @author lxg
 * @date 2018-12-10 上午 08:58
 */

//窗户ajax对象
function createXhr(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject("microsoft.XMLHttp");
    }
}


$(document).ready(function () {
    $("#userName").blur(function () {
        //1、获取ajax对象
        var xhr = createXhr();
        //2、创建请求
        xhr.open("post","server.php",true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //3、设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200){
                $("#userNmaeTip").html(xhr.responseText);
            }
        }
        //、发送请求
        xhr.send("username="+$("#userName").val());
    });
});

3、server.php

<?php
	$userName = $_REQUEST["username"];
	$link = mysqli_connect("localhost","root","root","test");
	$result = mysqli_query($link,"select * from user_validation where username='$userName'");
	
	$result_count = mysqli_num_rows($result);
	if($result_count > 0)
		echo "该用户名已经存在！";
	else
		echo "恭喜您，用户名可注册！";

?>