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

　　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. 自由创造属于你的H5内容

    在这里,你可以自由创造属于你的H5内容  mark下 http://www.ih5.cn/

  2. Javascript数组方法探究一二

    1. Array.prototype.slice方法 数组的 slice 方法通常用来从一个数组中抽取片断.不过,它还有将“类数组”(比如arguments和​HTMLCollection​)转换为真 ...

  3. Java安全发布的理解

    看<Java并发编程实战>遇到如下问题 代码: /** * Created by yesiming on 16/11/11. */public class Holder { private ...

  4. 【COGS1672】难存的情缘

    [题目描述] 一天机房的夜晚,无数人在MC里奋斗着... 大家都知道矿产对于MC来说是多么的重要,但由于矿越挖越少,勇士们不得不跑到更远的地方挖矿,但这样路途上就会花费相当大的时间,导致挖矿效率底下. ...

  5. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  6. ViewData与ViewBag比较

    在Asp.net MVC 3 web应用程序中,我们会用到ViewData与ViewBag,对比一下: ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从 ...

  7. python学习之旅：array 转 list

    最近学习python,记录学习的点滴. >>> import numpy as np >>> a = np.array([[1,2],[3,4]]) >> ...

  8. A题

    A - A Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%I64d & %I64u   Descriptio ...

  9. hibernate和struts2实现分页功能

    1.DAO层接口的设计,定义一个PersonDAO接口,里面声明了两个方法: public interface PersonDAO { public List<Person> queryB ...

  10. "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Connection

    "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Conne ...