jquery ajax详解

jquery ajax需要在服务器下进行学习！我们可以再网上进行下载，配置自己本地的服务器，我使用的是WAMP，(还有Apache、AppServ...)

对于前端不必会写PHP程序，我们只需要知道如何处理返回的数据！

$().load()

语法：.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

栗子：

新建一个a.txt文件，内容为：我是通过ajax读取过来的数据！我们现在通过ajax来读取a.txt文件，放入div中。

$(function () {
    $('#btn').click(function () {
         //data=Math.random();解决了浏览器缓存问题
        $('#div1').load("a.txt?data="+Math.random());
    });
});

成功读取

需要注意浏览器缓存问题（特别是IE缓存比较严重），解决方法就是在url后面加上Math.random();原理就是random是一个随机数，在url后面加上这个随机数，使得网址随时都是在变的，解决了缓存问题。

还可以加载HTML文件。

栗子：

<ul id="ul1">
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

<ul id="ul2">
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ul>

$(function () {
    $('#btn').click(function () {
        //#ul2只读取id为ul2的元素内容
        $('#div1').load('test.html?data='+Math.random()+' #ul2');
    });
});

成功读取

到这里为止都只是简单地从服务器读取数据，下面来看向服务发送数据等~

栗子：

HTML布局：

<input type="text" name="username" id="username" value="" />
<input type="button" id="btn" value="检验" />
<div></div>

然后准备一个PHP文件，control.php

<?php
    header('Context-type:text/html;charset=utf-8');
    //post方式接收
    $username = $_POST['username'];
    if($username == 'Join'){
        echo '用户名不能是Join';
    }else{
        echo "用户名可以注册";
    }
?>    

JS进行判断：

$('#btn').click(function () {
    //必须是json格式
    var send = {
        'username':$('#username').val()
    }
    //data：服务器返回的数据
    //textStatus：文本的情况
    //XMLHttpRequest:返回httprequest对象，如果是处理XML，就需要用到这个对象
    //后面两个参数可以不写，只写data
    $('div').load('control.php',send);
});

用load()方法也能完成ajax的请求，但是会把信息放入div里，所以用load做ajax验证的情况非常少。
ajax的验证会用get()和post()方法来做.

注意：当我们有发送data的时候，发送的形式是post方式发送的load函数。所以在PHP里要用post方式接收。发送的参数格式必须是json格式。

load函数前面必须是jqueryDom--->$().load()

$.get()

语法：jQuery.get( url [, data ] [, success ] [, dataType ] )

data:(可选)

callback:(必选)他的参数有data：返回的数据   textStatus:文本的状态   jqXHR：它不是像load一样返回的是源生的XMLHttpRequest,返回的是jquery包装后的XHR对象。

success:(可选)请求数据成功以后的回调函数

datatype:(可选)返回数据的类型

举一个最简单的$.get()的栗子：

首先，准备a.txt，内容为：我是通过$.get()方式读取的(⊙o⊙)哦！

然后，准备HTML文件，如下：

<input type="text" id="username" value="" />
<input type="button" id="btn" value="检测" />
<div></div>

再然后，就是读取~\(≧▽≦)/~啦啦啦：

$('#btn').click(function () {
    $.get('24_a.txt?data='+Math.random(),function (data) {
         $('div').html(data);
    });
 });

需要注意：$.get()方法，同样是由浏览器缓存的问题，处理的方法和load()是一样滴~

完胜