AJAX:Asynchronous （[ə'sɪŋkrənəs; eɪ-]）Javascript （['dʒɑ:və,skrɪpt]）and XML 异步的Javascript和XML
AJAX不是新的编程语言，而是一种使用现有标准的新方法

百度百科解释：

AJAX是指一种创建交互式网页应用的网页开发技术，中文名：阿贾克斯
AJAX = 异步 Javascript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
 
AJAX的基础：XMLHttpRequest
1.创建XMLHttpRequest对象：
variable=new XMLHttpRequest();

但是老版本的IE5、IE6使用ActiveX对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

因此为了适应所有的浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

2.XMLHttpRequest对象用于和服务器交换数据

如果需要将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：

open(method,url,async)

规定请求的类型，URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

下面是ajax请求本地.txt文件的全部代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax请求本地.txt文件</title>

    <script>

        window.onload = function () {

            var btn = document.getElementById('btn');

            btn.onclick = function () {

                //创建XHR对象

                var xhr = new XMLHttpRequest();

                //请求的方式，地址，是否异步 test.txt和该html文件在同一级目录

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

                //请求的确定操作，初始化，相当于搜索时，敲击的回车

                xhr.send(null);

                //请求的readyState每变化一次就执行一次onreadystatechange函数

                //其中readyState表示的是：请求/响应过程的当前活动阶段

                //readyState有如下取值

                /*

                 *   0：未初始化，尚未调用send()方法

                 *   1: 启动

                 *   2：发送

                 *   3：接收

                 *   4：完成

                 */

                xhr.onreadystatechange = function () {

                    if (xhr.readyState == 4 && xhr.status==200) {

                        alert(xhr.responseText);

                    }

                }

            };

        };

    </script>

</head>

<body>

<input type="button" id="btn" value="click">

</body>

</html>

效果：

3.AJAX——服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText:获得字符串形式的响应数据。

responseXML:获得 XML 形式的响应数据。

如果来自服务器的响应并非 XML，请使用 responseText 属性。responseText 属性返回字符串形式的响应，因此可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息:

onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState:

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

status:  200: "OK"     404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

上面就是最基础的AJAX使用方法。

AJAX（一、基本知识）的更多相关文章

  1. ajax的一部分知识

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  2. ajax的小知识---总是得到重复的数据

    按xmlhttp.open("GET","/try/ajax/demo_get.php",true);发送,可能会得到缓存中的结果; 可以改为xmlhttp.o ...

  3. Comet——反向Ajax （基础知识）

    Comet:服务器推送,与ajax页面向服务器请求数据相反.几乎可以实时将数据推送到客户端. 但本质一样:浏览器向服务器发起请求,服务器响应请求 Comet实现方式:长轮询.HTTP流 1.长轮询—— ...

  4. Python全栈开发之18、cookies、session和ajax等相关知识

    一.cookies 本质为在浏览器端保存的键值对,由服务端写在浏览器端,以后每次请求的时候,浏览器都携带着cookie来访问,cookies的使用之处非常多,比如用户验证,登陆界面,右侧菜单隐藏,控制 ...

  5. ajax的相关知识总结

    一.ajax的工作原理 a.创建XMLHttpRequeat对象 var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, ...

  6. Ajax——异步基础知识（三）

    封装异步请求 1.将函数作为参数进行使用 2.因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数 <!DOCTYPE html> <html lang=&qu ...

  7. Ajax——异步基础知识（二）

    XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...

  8. Ajax——异步基础知识（一）

    基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...

  9. Ajax——php基础知识（一）

    AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安 ...

  10. js的AJAX请求有关知识总结

    什么是AJAX?AJAX作用是什么? async javascript and xml(异步的javascript和xml) 作用:实现局部刷新 async:我们真实项目中一般使用AJAX从服务器端获 ...

随机推荐

  1. vs快捷键大全

    前言 作为一个.net开发员,你还在用鼠标去点击相应的操作么?如果你回答是,那么你太low了! 一个很厉害的程序员不会是那种这鼠标到处狂点的人,他们肯定会很多快捷键,所以为了离他们更近一步,我们必须学 ...

  2. php使用内置的mcrypt_encrypt和mcrypt_decrypt进行字符串加密解密

    <?php /*****************************加密*******************************/$key = "miyao";// ...

  3. Vue 源码解析：深入响应式原理（上）

    原文链接:http://www.imooc.com/article/14466 Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScri ...

  4. 随机生成验证码import random

    #!/usr/bin/env python import random temp = "" for i in range(6) : num = random.randrange(0 ...

  5. SLES 10安装Oracle10gR2笔记

    SLES 10安装Oracle10gR2笔记 一. 数据库安装 . 安装C/C++ Compiler gcc --version验证是否安装 . 验证Service Pack版本 SPident –v ...

  6. boldSystemFontOfSize 和 systemFontOfSize 的区别

    使用 UIFont 的下列方法: + systemFontOfSize + boldSystemFontOfSize + italicSystemFontOfSize p.p1 { margin: 0 ...

  7. js 单例模式笔记

    单例指一个类只有一个实例,这个类自行创建这个实例. 利用对象字面量直接生成一个单例: var singleton = { prop: 1, method: function(){ console.lo ...

  8. webpack配置命令

    从2015年开始,webpack就是当前最火的构建工具.跟着时代向前走.准没错.我们要追随大神的脚步.走在前端技术栈的前列.大神等等我. 由于webpack是基于nodejs环境下的.所以先安装nod ...

  9. 读《编写可维护的JavaScript》第九、十章总结

    第九章 将配置数据从代码中分离出来 9.2 抽离配置数据 这章比较好理解,也非常常见,作者给的俩个例子就能说明一切: // 将配置数据藏在代码中 function validate(value) { ...

  10. WebUpLoder 能自动预览，能多实例，包括后台demo

    样式在网上找的.样子: 懒得写别的了,代码里面我写的注释挺详细的:https://github.com/zhangsai521314/WebUpLoder 写文不易,转载请注明出处:http://ww ...