ajax的基本概念及其使用

XMLHttpRequest

ajax使用的依旧是HTTP请求,那么让我们来回忆一下一个完整的HTTP请求需要什么

• 请求的网址,方法get/post
• 提交请求内容数据,请求主体等
• 接收响应回来的内容

五步使用法:

1. 建立XMLHTTPRequest对象
2. 注册回调函数,当服务器回应我们了,我们想要执行什么逻辑
3. 使用open方法设置和服务器端交互的基本信息，设置提交的网址,数据,post提交的一些额外内容
4. 设置发送的数据，开始和服务器端交互，发送数据
5. 更新界面，在注册的回调函数中,获取返回的数据,更新界面

代码示例：get

get的数据,直接在请求的url中添加即可

<script type="text/javascript">
    // 创建XMLHttpRequest 对象
    var xml = new XMLHttpRequest();
    // 设置跟服务端交互的信息
    xml.open('get','01.ajax.php?name=fox');
    xml.send(null);    // get请求这里写null即可
    // 接收服务器反馈
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 打印响应内容
            alert(xml.responseText);
        } 
    };

</script>

代码示例：post

<script type="text/javascript">
    // 异步对象
    var xhr = new XMLHttpRequest();


    // 设置属性
    xhr.open('post', '02.post.php' );


    // 如果想要使用post提交数据,必须添加
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");



    // 将数据通过send方法传递
    xhr.send('name=fox&age=18');



    // 发送并接受返回值
    xhr.onreadystatechange = function () {

    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
           alert(xhr.responseText);
         } 
    };
</script>

http://blog.csdn.net/gyq04551/article/details/55253707