jQuery操作Ajax

一、简介

AJAX：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
　　AJAX 应用程序与浏览器和平台无关。

它由下列技术组合而成：
　　1.使用CSS和XHTML来表示。
　　2. 使用DOM模型来交互和动态显示。
　　3.使用XMLHttpRequest来和服务器进行异步通信。
　　4.使用javascript来绑定和调用。

二、工作原理

1.通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据同时能够不刷新页面。

2.核心是XMLHttpRequest。

3.XMLHttpRequest对象的属性有：

　　onreadystatechange 　　　每次状态改变所触发事件的事件处理程序。
　　responseText 　　　　　　从服务器进程返回数据的字符串形式。
　　responseXML 　　　　　　从服务器进程返回的DOM兼容的文档数据对象。
　　status 　　　　　　　　　从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
　　status Text 　　　　　　伴随状态码的字符串信息
　　readyState 　　　　　　对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
　　　　1 (初始化) 对象已建立，尚未调用send方法
　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

4.函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyState =4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作：

　　open和send：　　

　　　　其中open方法指定了：
　　　　　　a、向服务器提交数据的类型，即post还是get。
　　　　　　b、请求的url地址和传递的参数。
　　　　　　c、传输方式，false为同步，true为异步。默认为true。
　　　　　　　　如果是异步通信方式(true)，客户端不等待服务器响应；如果是同步方式(false)，客户端就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。
　　　　Send方法用来发送请求。

三、jQuery操作Ajax

1.目的：简化书写，提高兼容性

2.jQuery load() 方法局部方法->加载静态文件异步获取　

　　load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
　　语法：$(selector).load(URL,data,callback);
　　　　必需的 URL 参数规定您希望加载的 URL。
　　　　可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
　　　　可选的 callback 参数是 load() 方法完成后所执行的函数名称。

　　　　callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
　　　　　　responseTxt - 包含调用成功时的结果内容
　　　　　　statusTXT - 包含调用的状态
　　　　　　xhr - 包含 XMLHttpRequest 对象

3.jQuery的get()和post()方法（两种特殊写法）全局方法

　　差异：
　　　　GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
　　　　POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

　　$.get() 方法：
　　　　语法：$.get(URL,callback);
　　　　　　必需的 URL 参数规定您希望请求的 URL。
　　　　　　可选的 callback 参数是请求成功后所执行的函数名。
　　　　　　可选参数 type 服务器返回的内容格式

　　$.post() 方法：
　　　　语法：$.post(URL,data,callback);
　　　　　　必需的 URL 参数规定您希望请求的 URL。
　　　　　　可选的 data 参数规定连同请求发送的数据。
　　　　　　可选的 callback 参数是请求成功后所执行的函数名。
　　　　　　可选参数 type 服务器返回的内容格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
           $(function(){ 
                $("input[name='uname']").focus(function(){ 
                    $(this).next("span").remove();
                    $("<span>请输入正确账号</span>").css("color","#f00").insertAfter(this);
                }).blur(function(){ 
                        var  ob=$(this);
                        ob.next("span").remove();
                        var  v=ob.val();
                        $.get("4.php",{uname:v},function(data){ 
                            //判断
                            if(data=="y"){ 
                                $("<span>此账号存在</span>").css("color","red").insertAfter(ob);

                            }else{
                                $("<span>账号可以使用</span>").css("color","green").insertAfter(ob);
                                      }
                        })
                })
           })

    </script>
</head>
<body>
    <h3>使用get执行注册账号验证</h3>
    <form action="index.php">
        账号: <input type="text" name="uname"><br/><br/>
        密码: <input type="password" name="upass"><br/><br/>
        邮箱: <input type="email" name="email"><br/><br/>
        <input type="submit"  value="注册">
    </form>
</body>
</html>

表单验证实例(get)

<?php 

$uname=$_GET['uname'];
$list=array("zhangsan","lisi","wangwu");
if(in_array($uname,$list)){ 
   echo "y";
}else{ 
    echo "n";
}
//数组  array("uname"=>"$v")

4.php

4.jQuery AJAX的一般写法：$.ajax

　　语法：
　　　　$.ajax({
　　　　　　url: url,
　　　　　　type: 'POST',
　　　　　　data: data,
　　　　　　beforeSend:beforeSend,
　　　　　　async:true/false 是否异步和同步
　　　　　　success: success,
　　　　　　complete: complete,
　　　　　　error:error,
　　　　　　dataType: dataType

　　　　　　});
　　　　参数描述：
　　　　　　url 必需。规定把请求发送到哪个 URL。
　　　　　　data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
　　　　　　beforeSend 可选。发送请求前执行。
　　　　　　success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
　　　　　　complete 可选。不论成功失败都会执行的。
　　　　　　error 可选。获取错误类型。
　　　　　　dataType 可选。规定预期的服务器响应的数据类型。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
    $(function(){ 
        //为按钮添加点击事件
        $("button").click(function(){ 
            //发送ajax
            $.ajax({ 
                url:"1.php", //请求地址
                type:"post", //发送方式
                data:{pic: "pro4.jpg"}, //请求的数据
                async: true, //是否同步
                dataType: "html", //响应数据的格式
                success:function(data){  //成功的回调函数
                    $("#dd").html(data);
                },
                error:function(){ 
                    alert("ajax请求失败");
                }

            })
        })

    })

    </script>
</head>
<body>
    <h2>jquery中的ajax实例 :  使用ajax操作</h2>
    <button >加载</button><br>
    <div id="dd" style="200px;height:200px;border:1px solid blue;">
        
    </div>
</body>
</html>

表单验证实例(ajax)

<?php 

$uname=$_GET['uname'];
$list=array("zhangsan","lisi","wangwu");
if(in_array($uname,$list)){ 
   echo "y";
}else{ 
    echo "n";
}
//数组  array("uname"=>"$v")

4.php