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深入学习笔记

最近在学习ajax,下面整理了一下学习的内容,以便巩固用。 先来看看为什么要用ajax,也就是同步和异步是什么:同步和异步同步的意思就是客户端提交表单,发起请求后需要一直等待服务器端的响应,收到服务...
  • VivianHope
  • VivianHope
  • 2015年06月03日 15:54
  • 1799

Ajax学习总结(一)

Ajax学习(一) 一、      什么是ajax 1、Ajax(Asynchronous JavaScript and XML)使用脚本操纵HTTP的Web应用架构。 2、所有的浏览器都支持X...
  • u010913443
  • u010913443
  • 2016年08月13日 17:31
  • 1045

AJAX学习-到底是个什么东西

AJAX 是将咱们之前学到的HTML、CSS、XML、Js等web知识结合起来使用的一门技术,通过XMLHttpRequest对象实现异步的操作,可以在不重新加载整个页面的情况下,与服务器交换数据并更...
  • u010168160
  • u010168160
  • 2015年01月05日 07:55
  • 5221

AJAX学习总结(入门)

AJAX教程:http://www.w3school.com.cn/ajax/index.asp AJAX视频教程:http://www.imooc.com/view/250...
  • doris_d
  • doris_d
  • 2015年03月03日 09:57
  • 975

【Ajax】——学习后的小结

背景:牛腩中接触过CSS,当时对这个CSS情有独钟,因为它可以美化界面,而我就喜欢和界面这种看得见效果的东西打交道,现在又重新学习,而且内容还那么多,超级开心,废话少说,动手吧! 一、CSS滤镜 ...
  • u013043341
  • u013043341
  • 2016年01月15日 21:46
  • 922

AJAX学习必备三本书

AJAX学习必备三本书 【http://club.book.csdn.net/people/mylist599.html】Ajax基础教程(亚马逊计算机榜首图书,国内第1本Ajax图书)   (美)阿...
  • phdbrianlee
  • phdbrianlee
  • 2007年09月19日 17:41
  • 2509

Ajax系统学习总结

Ajax的工作原理相当于在用户和服务器之间加上了一个中间层,是用户操作与服务器响应异步化。Ajax的一个最大的特点是无需刷新页面,便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于X...
  • lmb55
  • lmb55
  • 2016年05月26日 19:58
  • 859

js的Ajax学习

Ajax:异步的javascript和xml Ajax 的核心是XMLHttpRequest对象,该对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息,用户不需...
  • liujie19901217
  • liujie19901217
  • 2016年03月02日 21:06
  • 1155

Ajax很简单

 最初看到ajax感觉好惊喜啊,不用刷新全部页面,就可以更改局部页面数据。真的很方法但是以为会很难,但实际做了才知道,AJAX很简单。至少入门很简单 如果你会ajax那就不要看了。更不要骂我。比我牛的...
  • kingbug
  • kingbug
  • 2005年10月06日 16:02
  • 1335

ajax的总结和使用

Ajax 完整教程 Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 ...
  • qq_34664963
  • qq_34664963
  • 2016年12月26日 14:57
  • 484
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax学习
举报原因:
原因补充:

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