ajax学习笔记

最新推荐文章于 2024-11-14 23:57:40 发布

Dread_naught

最新推荐文章于 2024-11-14 23:57:40 发布

阅读量582

点赞数

分类专栏：建站文章标签： ajax

本文链接：https://blog.csdn.net/Dread_naught/article/details/41412923

版权

建站专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(文中标注灰色的是现阶段不懂，以后再研究的地方)

Ajax = Asynchronous Javascript and XML 异步Javascript和XML

一、XMLHttpRequest：Ajax的基础

XMLHttpRequest对象是用来和服务器交换数据的。

如果需要向服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法；

方法：

描述：

open(method, url, async)

规定请求的类型、url以及是否异步处理请求：

l method：请求的类型：GET/POST

l URL：负责处理该请求的程序位置

l async：true（异步）、false（同步）

send(string)

send()

将请求发送到服务器。

参数string仅用于post请求

一个简单的get请求：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();

注意：为了避免浏览器使用缓存结果，请务必在url添加一个唯一的ID

xmlhttp.open("GET",

"demo_get2.asp?fname=Bill&lname=Gates&sid="+Math.random()",true);

xmlhttp.send();

如果要用POST方式发送数据，那么我们应该先用setRequestHeader()来添加HTTP头。然后在send()方法中规定希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

如何创建XMLHttpRequest对象？

function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
    {// Firefox, Opera 等
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {      // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}<span style="font-family: 'Times New Roman', serif; font-size: 10.5pt; text-indent: 0cm; background-color: rgb(255, 255, 255);"> </span>

如何获得XMLHttpRequest的响应？

属性：	描述：
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

例如：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是xml，而且需要对xml对象进行解析，就应该使用responseXML属性：

例如：

var xmlDoc = xmlHttp.responseXML;
var txt = "";
var x = xmlDoc.getElementsByTagName("ARTIST");
for (i=0; i<x.length; ++i)
{
    txt = txt+x[i].childNode[0].nodeValue + "<br/>";
}
document.getElementById("myDiv").innerHTML = txt;

二、onreadystatechange事件：

当请求被发送到服务器时，readyState就会改变。每当readyState改变时，就会触发onreadystatechange事件。

属性：	描述：
onreadystatechange	是一个监听器接口，可以用类似于C++回调函数或者C#委托的方式，把回调函数赋值给它。
readyState	存有XMLHttpRequest的状态，有0到4五种状态 l 0：请求尚未初始化 l 1：服务器连接已经建立 l 2：请求已接收 l 3：请求处理中 l 4：请求已完成，且响应已就绪
status	200：OK 404：找不到页面

三、综合示例：

<!-- login.html --!>
<html>
    <head>
        <title>登录星愿天空</title>
        <meta charset="UTF-8">

    <link rel="shortcut icon" href="resources/favicon.ico">
    <link rel="stylesheet" href="stylesheet/style_login.css" media="screen" type="text/css">
    <script type="text/javascript" src="script/login.js"></script>
    <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="script/modernizr.js"></script>
    <script type="text/javascript">
        function submit_click()
        {
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            feedback(email,password);
        }
        function register_click()
        {
            window.location.href="http://m82a1.sinaapp.com/register.html";
        }
    </script>
    </head>
<body>
    <form action="servlet/doLogin.php" method="GET">
        <input name="email"    placeholder="您的注册邮箱?" class="email" type="email"    id="email" required />
        <input name="password" placeholder="您的密码?"    class="pass"  type="password" id="password" required />
        <div id="message"></div>
        <input name="smt" class="btn" type="button" οnclick="submit_click()" value="我要许愿^O^" />
        <input name="" class="btn" type="button" οnclick="register_click()" value=">_<我要注册"/>
    </form>
</body>
</html>

/*
 * login.js
 */
var xmlHttp;
function feedback(email, password)
{
    xmlHttp = GetXmlHttpObject();
    if(xmlHttp==null)
    {
        alert("您的浏览器不支持ajax");
        return;
    }
    var url = "../servlet/doLogin.php";
    url = url+"?email="+email+"&password="+password+"&rid="+Math.random();
	//绑定readystatechange监听者
    xmlHttp.onreadystatechange = onReadyStateChanged; 
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function onReadyStateChanged()
{
    if (xmlHttp.readyState==4)
    {
        if (xmlHttp.status==200)
        {
            if(xmlHttp.responseText == "true")
            {
                window.location.href = "../main.php";
            }
            else {
                document.getElementById("message").innerHTML = "用户名或密码错误";
            }
        }
    }
    else if (xmlHttp.readyState==2)
    {
        document.getElementById("message").innerHTML = "正在连接服务器..."
    }

}

function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
    {      // Firefox, Opera 等
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {      // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

<?php
/** doLogin.php
 * Created by PhpStorm.
 * User: APTX_4869
 * Date: 2014/11/20
 * Time: 11:19
 */
session_start();
$mysql = new SaeMysql();
$mysql->setCharset("UTF8");
$data = $mysql->getData("select * from ".
    "`USER_TABLE` where".
    "`email`='".$_GET["email"]."' and ".
    "`password`='".$_GET["password"]."'");
if (count($data)>0)
{
    $_SESSION["uid"] = $data[0]["uid"];
    echo "true"; //盖戳
    /*
     * 特别注意！！！！
     * 在使用ajax的情况下，如果登录成功，不应当在服务端转发请求
     * 而应当采用“盖戳”的形式，即把用户id记录在会话。同时标注TRUE
     * 
     * 如果不这么做，你转发的页面就会嵌入登录框的div里面
     * 要多难看有多难看
     */
}
else {
    echo "false";
}
$mysql->closeDB();