Ajax学习

原创 2016年06月02日 10:27:18

一、什么叫做Ajax
ajax : Asynchronous JavaScript and XML 异步JavaScript和XML

用javascript异步形式去操作xml

主要用于数据交互

二、Ajax的基本原理
1、创建Ajax对象

        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

2、设置请求方式以及是否异步
首先需要了解异步和同步的概念:异步:非阻塞 前面的代码不会影响后面代码的执行(例如setInterval函数)
同步:阻塞 前面的代码会影响后面代码的执行

xhr.open('get','1.txt',true);

这里的true指的是异步加载

3、

xhr.send();

在post方式下需要使用send方法传送数据

4、当发送完请求后需要等待服务器返回内容,这里有几个关键的参数:

            readyState : ajax工作状态
            responseText : ajax请求返回的内容就被存放到这个属性下面
            on readystate change : 当readyState改变的时候触发
            status : 服务器状态,http状态码

由于Ajax一般是异步加载,那么我们必须要判断请求内容何时加载完成,readyState代表Ajax工作状态,当其值为4的时候代表加载完成并且已经解码完毕,但是这并不代表我们可以是用返回值了,因为返回值可能是不存在的或者是错误的(比如open的时候url不小心写错了,导致找不到文件),只有当status等于200的时候才是正常的状态。

        xhr.onreadystatechange = function() {

            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert('出错了,Err:' + xhr.status);
                }
            }

        }

三、Ajax函数的封装

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == 'get' && data) {
        url += '?' + data;
    }

    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err:' + xhr.status);
            }
        }

    }
}

四、需要注意的一些地方
1、由于服务器返回的数据是字符串格式,需要采用适当的手段将其转换为我们需要的格式

stringify : 可以把一个对象转成对应字符串
parse : 可以把字符串转成对应对象

注意:json必须是严格模式parse方法才有效

2、get方式下的缓存问题

解决方法:可以在url后面跟一个时间戳new Date().getTime()
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Ajax&Json学习笔记

  • 2017年08月01日 23:24
  • 30KB
  • 下载

xml与ajax学习

  • 2015年06月17日 23:34
  • 32KB
  • 下载

ExtJS5.1学习笔记9——Ext中的Ajax请求

下面的代码展示了在Ext中使用Ajax的方法: 首先是html文件的代码: Ext.onReady(function(){ var form...

ajax学习课件

  • 2017年06月05日 14:22
  • 1.65MB
  • 下载

angular.js学习之三ajax请求得不到数据

本地创建了一个测试项目,然后发送get请求,发现得不到数据,但是使用firebug的网络面板,发现远程url请求状态是200正常的。一开始也不知道是什么原因,查看了很多博客资料,尝试了不同的请求写法。...
  • eadio
  • eadio
  • 2016年07月25日 10:07
  • 1257

Ajax学习总结

  • 2015年10月13日 16:16
  • 35B
  • 下载

Ajax的学习

  • 2014年10月27日 15:54
  • 692KB
  • 下载

jQuery学习之旅10 ajax快餐

1. 摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax学习
举报原因:
原因补充:

(最多只允许输入30个字)