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

　　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. WebService笔记-Schema约束

                        Schema约束 俗话说得好 好记性不如烂笔头. 看了下WebService视频,觉得还是得下笔记. 观看的视频地址:http://edu.51cto.com/ ...

  2. 保垒机SSH登录脚本

    线上服务器一般都会有一个保垒机,我们登录线上服务器的时候都要通过这个堡垒机来实现登录,这样我们就要维护很多线上服务器的ip,很麻烦. 所以写了一个脚本用来便捷的登录各个服务器,可以把这个脚本放到跳板机 ...

  3. linux之umask函数解析

    [lingyun@localhost umask_1]$ vim umask.c  + umask.c                                                 ...

  4. [C++] 对象地址与接口指针的故事

    刚想到一个问题,一直在思考C++中对象地址与接口指针的故事. 问题:多继承的情况下,一个具体类对象实现了多个接口,那么多该对象获取的不同接口指针是一样的吗?不是一样吗?不是对象地址吗?-- 困惑原因, ...

  5. ar命令和nm命令（建库！）

    ar 命令详解 今天,跟着我们的技术大牛学了不少东西,首先就是这个ar命令啦. 当我们的程序中有经常使用的模块,而且这些模块在其他程序中也会用到,为了实现代码重用减少软件开发周期,我们可以将它们生成库 ...

  6. Git 远程仓库的管理和使用

    要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写.同他人协作开发某 个项目时,需要管理这些远程仓库 ...

  7. C语言基础学习基本数据类型-Char类型

    char类型 char类型用于储存字母和标点之类的字符.但是在技术实现上char却是整数类型.为了处理字符,计算机使用一种数字编码,用特定的整数表示特定的字符.字符变量输入输出用%c符号.定义语法如下 ...

  8. windows下Django 部署到Apache24的配置

    1.首先下载最新版Apachehttp://httpd.apache.org/download.cgi#apache24,目前官方以不提供windows msi安装包,下载好的直接解压至C盘即可,ap ...

  9. Java高精度学习第一弹

    为了快速解决高精度问题,总算是要来接触java了,算上这学期要开java的课了,好好学习吧! 拿来练手的是hdu的1002,高精度加法. import java.util.*; import java ...

  10. 在Xcode中如何屏蔽某个源文件的编译警告信息

    某些时候如果我们的源码在编译过程中出现大量的编译警告时,看起来是挺不爽的:但又确实没办法解决警告问题的时候,我们可以使用下面的方法来屏蔽指定的某个文件的所有警告信息. 1.在Xcode中选中工程文件. ...