这是我在博客园写的第一遍博客，之前都是只看不写，在园子里学到了不少的东西，现在也想着把自己的一些感悟写出来给大家分享一下。

　　ajax技术可以说是Web2.0应用程序的技术基础，尽管软件经销商和开源社区提供很多ajax的框架，但是我们仍然有必要理解ajax实现的来龙去脉。

　　首先要说的是HTTP请求，因为ajax是基于HTTP请求的，所以说ajax就必须要从HTTP请求说起。我们知道我们上网的过程就是浏览器和服务器进行文件传输的过程，而他们之间之所以能够进行传输文件肯定是遵守了一定的规范，而HTTP规范就是浏览器和服务器进行文件传输的规范之一。

　　HTTP（Hyper Text Transfer Protocol）超文本传输协议，它对浏览器向服务器的请求和服务器对浏览器的响应都进行了规范，所以HTTP主要包括请求和响应两部分。请求主要包括请求行，请求头和请求主体三部分。

这里需要注意的是，用get请求方式请求的时候请求的内容是拼接在URL后面的，而用post请求的时候，请求的内容是放在请求主体里面。还有就是用post请求方式进行请求的时候请求头里要设置Content-Type这个属性而用get请求的时候则不需要。

相对应的服务器向浏览器的响应包括了相应行，响应头和响应主体三部分

　　说完了HTTP请求，我们就可以来说一下Ajax技术了，ajax不是一种新的语言而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通讯。而ajax就是Asynchronous JavaScript And XML 四个单词的缩写，Asynchronous是异步的意思，指某段程序执行时不会阻塞其他程序的执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。ajax利用一个构建到现代浏览器的一个内置对象 XMLHttpRequest对象来实现异步接收和发送HTTP请求和相应信息。

　　下面我们就结合实际代码来体会一下，ajax怎么实现与后代的数据相互的

   =====get=====

     //设置请求行

    xhr.open('get','02.php?name=zhang&age=18');

    //设置请求头

    //get 不用设置

    //post必须设置

    //设置请求主体

    //如果是get null post要把请求的内容放在里面

    xhr.send(null);

    =====post====

     //设置请求行

    xhr.open('post');

    //设置请求头

    //get 不用设置

    //post必须设置

    xhr.setRequestHeader('Content-Type','application/x-www-form-        urlencoded');

    //设置请求主体

    //如果是get null post要把请求的内容放在里面

    xhr.send('02.php?name=zhang&age=18');

　　这样就利用XMLHttpRequest对象实现了一次浏览器向服务器的一次请求，下面就是处理响应

 //监听响应状态的变化

    xhr.onreadystatechange = function(){

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

            //当响应的状态为4 HTTP的状态为200的时候 处理响应的内容

        }

    }

　　下面是XMLHttpRequest的一些响应的属性

　　当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。

　　表格1.XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值

描述

0

描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。

1

描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

2

描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。

3

描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。

4

描述一种"已加载"状态；此时，响应已经被完全接收。

　　onreadystatechange事件
　　无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。
　　responseText属性
　　这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
　　responseXML属性
　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。
　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。
　　status属性
　　这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
　　statusText属性
　　这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

　　到这里Ajax的“A”和“J"已经说完了 现在还有一个X没有说，我们知道X是XML的意思，那么XML到底是什么东西呢，XML是一种标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据），下面的代码 是一个例子

　　

<?xml version="1.0" encoding="UTF-8"?> //

//一定要有一个root节点

//root里面的东西可以自定义

<root>

    <array>

        <item>

            <picture>apple</picture>

            <oldPrice>100</oldPrice>

            <newPrice>10</newPrice>

        </item>

        <item>

            <picture>apple</picture>

            <oldPrice>100</oldPrice>

            <newPrice>10</newPrice>

        </item>

        <item>

            <picture>apple</picture>

            <oldPrice>100</oldPrice>

            <newPrice>10</newPrice>

        </item>

    </array>

</root>

语法规则

1、必须有一个根元素

2、不可有空格、不可以数字或.开头、大小写敏感

3、不可交叉嵌套

4、属性双引号（浏览器自动修正成双引号了）

5、特殊符号要使用实体

6、注释和HTML一样

　　现在我们把ajax的四个单词都介绍完了，我们结合一个综合的案例用ajax把一个XML数据异步渲染在页面上,代码如下

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

     table{

            border-collapse: collapse;

        }

        td,th{

            border: 1px solid #ccc;

            height: 50px;

            text-align: center;

            padding: 0 20px;

        }</style>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>图片地址</th>

                <th>原始价格</th>

                <th>折后价格</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>

</body>

<script type="text/javascript">

    //获取异步对象

    var xhr = new XMLHttpRequest();

    //设置请求头

    xhr.open('get','03.php');

    //设置请求主体

    xhr.send(null);

    //监听响应状态

    xhr.onreadystatechange = function(){

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

            //接收XML文件

            //console.log(xhr.responseXML)

            var XMLDom = xhr.responseXML;

            //获取XML数据里面的内容

            var items = XMLDom.querySelectorAll('item');

            var renderDom = document.querySelector('tbody');

            var renderHtml = '';

            for ( var i = 0; i < items.length; i++ ){

                //遍历数据 获取每个数组里的内容

                var item = items[i];

                var picDom = item.querySelector('pic');

                var oldDom = item.querySelector('oldPrice');

                var newDom = item.querySelector('newPrice');

                //获取每个标签里的值

                var pic = picDom.innerHTML;

                var old = oldDom.innerHTML;

                var ne = newDom.innerHTML;

                //把XML里面的数据值 拼接在HTML标签里

                renderHtml += '<tr>';

                renderHtml += '<td>'+pic+'</td>';

                renderHtml += '<td>'+old+'</td>';

                renderHtml += '<td>'+ne+'</td>';

                renderHtml += '</tr>';

            }

            //渲染到页面上

            renderDom.innerHTML = renderHtml;

        }

    }

</script>

</html>

　　到现在整个Ajax的基本含义上面有了一个整体的解释，但是XMLHttpRequest在IE6以下的版本是没有提供的但是提供了一个ActiveObject("Microsoft.XMLHTTP")的属性，如果要兼容IE的早期的浏览器，要做一个简单的判断

    if( window.XMLHttpRequest ){

                var xhr = new XMLHttpRequest();

                } eles {

                var xhr = new ActiveXObject("Micsoft.XMLHTTTP")

　　

ajax的来龙去脉的更多相关文章

  1. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. 走进JavaWeb技术世界1：Web后端与J2EE的由来

    转自:微信公众号 码农翻身 这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求 ...

  3. python 全栈开发，Day97(Token 认证的来龙去脉,DRF认证,DRF权限,DRF节流)

    昨日内容回顾 1. 五个葫芦娃和三行代码 APIView(views.View) 1. 封装了Django的request - request.query_params --> 取URL中的参数 ...

  4. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  5. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  6. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  7. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  8. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  9. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

随机推荐

  1. 查看sql server数据库各表占用空间大小

    exec sp_MSForEachTable @precommand=N' create table ##(id int identity,表名 sysname,字段数 int,记录数 int,保留空 ...

  2. 225 Implement Stack using Queues(用队列实现栈Medium)

    题目意思:用队列实现栈,push(),pop(),top(),empty() 思路:用两个queue,pop时将一个queue的元素pop再push到另一个队列,queue只留最后一个元素,并pop, ...

  3. sql 语句左连接右连接小例子

    A表(a1,b1,c1) B表(a2,b2) a1 b1 c1 a2 b2 01 数学 95 01 张三 02 语文 90 02 李四 03 英语 80 04 王五 select A.*,B.* fr ...

  4. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  5. python运维开发之第九天

    一.paramiko模块 1.简介 大家会发现,常见的解决方法都会需要对远程服务器必要的配置,如果远程服务器只有一两台还好说,如果有N台,还需要逐台进行配置,或者需要使用代码进行以上操作时,上面的办法 ...

  6. Python新手学习基础之函数-lambda函数

    lambda函数 在Python里除了用def定义函数外,还有一种匿名函数,也就是标题所示的lambda函数,它是指一类无需定义标识符(函数名)的函数或子程序. lambda函数的使用语法如下: la ...

  7. 在动态引用DLL-A中，当参数是个实体，而实体的属性在另一个DLL-B中。。我们需要得到A这个实体并将其赋值，并将赋值的实体传人DLL-A的方法中。

    string strPath = HttpContext.Current.Server.MapPath("/开放式DLL"); DirectoryInfo df = new Dir ...

  8. My97DatePicker 与 某个CSS冲突 ，导致无法显示

    调试 Metronic3.7 模版  ,boostrap的时间插件不怎么好用,改用My97DatePicker, 发现某个与plugins.css中某个插件冲突,经排查发现 css 中有这一段 ifr ...

  9. MySQL的索引

    MySQL索引 索引:是一种特殊的文件(InnoDB 数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.其可以加快数据读操作,但会使数据写操作变慢:应该构建在被用作查询条 ...

  10. iOS App转让流程

    说法一: (1)选择转让APP (2)进入转让界面       点击Continue进入下一步   (3)输入对方的APP ID和Team ID     Apple ID 和 Team ID 可以在m ...