Web中的AJAX技术:

1、介绍:
全称:Asnchronous JavaScript and XML,即异步的JavaScript和XML
功能:它不是某种编程语言,是一种无需加载整个网页的情况下能够更新部分网页的技术。
扩展:
  a、传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。
  b、使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。

2、学习AJAX技术需要的基础知识:HTML+CSS+JavaScript

3、AJAX-同步和异步

  a.同步:提交表单时,每次填完一个输入框内容,客户端都要向服务端发送请求,服务端收到请求后会对该请进行处理,接着向客户端输出响应,客户端等待响应并重新载入整个页面,如此往复...

  b.异步:提交表单时,每次填完一个输入框内容,客户端都要向服务端发送请求,服务端收到请求后会对该请进行处理,接着向客户端输出响应,客户端验证信息将错误的内容标红但是并没有去载入这个页面,在此过程中,我们还可以去接着去填写其他的输入框内容,直到最后提交载入页面...

  c、异步使用的对象:XMLHttpRequest

4、实现AJAX技术的步骤
  a.运用HTML和CSS来实现页面,表示信息;
  b.运用XMLHttpRequest和web进行数据的异步交换;
  c.运用JavaScript操作DOM,实现动态数据局部刷新。

5、AJAX-XMLHttpRequest对象的创建
  var request = new XMLHttpRequest();
  这个对象的使用除了不兼容IE5/6外,基本涵盖了所有的浏览器,如图所示:

  那么如何兼容IE6或者更早的版本,应该使用下面的这段代码:

var request;
  if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
  }else{
    request = new ActiveXObject("Microsoft.XMLHTTP");//IE6/5
  }

6、XMLHttpRequest对象创建之后就是请求了,在此之前先具体了解一下HTTP
  a.http是计算机通过网络进行通信的规则
  b.http是一种无状态的协议,客户端首先与服务器建立连接,然后客户端向服务器发送请求,服务器收到请求后处理,处理完后向客户端输出响应信息,客户端收到响应后,它们之间的连接就会断开,在整个过程中,服务器是没有保存记忆的,如果客户端需要新的数据,就必须重新请求。如图所示:

7、HTTP请求的7个具体步骤
  a.建立一个TCP连接
  b.Web浏览器向Web服务器发送请求命令
  c.Web浏览器发送请求头信息
  d.Web服务器应答
  e.Web服务器发送应答头信息
  f.Web服务器向浏览器发送数据
  g.Web服务器关闭TCP连接

8、一个HTTP请求一般由四部分组成
  (1)HTTP请求的方法或动作,比如是GET还是POST请求;
  (2)正在请求的URL,总的知道请求的地址是什么;
  (3)请求头,包含一些客户端环境的信息,身份验证信息等;
  (4)请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等。
  如下的请求方式

分析:

请求方式:get     请求地址:login.php   请求协议:HTTP

中间部分为请求头信息

最后面的一行为请求正文,也就请求的参数

9、HTTP请求中的GET和POST请求
  * GET:
    a.一般用于信息获取
    b.使用URL传递参数
    c.对所发信息的数量也有限制,一般在2000个字符
  *POST:
    a.一般用于修改服务器上的资源
    b.对所发信息的数量无限制

10、一个HTTP响应一般由三部分组成
  (1)一个数字和文字组成的状态码,用来显示请求是成功还是失败
  (2)响应头,响应头也和请求头一样包含许多有用的的信息,例如服务器类型,日期时间,内容类型和长度等。
  (3)响应体,也就是响应正文
  如下的响应方式,如图:

  分析:

头一行请求状态码:200,表示请求成功  请求协议:HTTP

剩余部分为响应头信息

  如下的状态码,如图:

11、AJAX-XMLHttpRequest发送请求
  方法:
  open(method,url,async)
    *method:请求的方法,get/post
    *url:请求的地址
    *async:请求的方式,同步false/异步true

  setRequestHeader(……):设置头信息

  send(string)
    *string,一般是post请求时要传递的参数,get传null即可

  请求实例如下图:

12、AJAX-XMLHttpRequest取得响应
  属性和方法:
  resposeText:获得字符串形式的响应数据
  resonseXML:获得XML形式的响应数据
  status和statusText:以数字和文本形式返回HTTP状态码

  getAllResponseHeader():获取所有的响应报头
  getResponseHeader("参数"):查询响应中某个字段的值

  readyState属性用监听服务器的处理过程:
    *0:请求为初始化,open还没有调用
    *1:服务器连接已建立,open已经调用
    *2:请求已接收,也就是接收到头信息了
    *3:请求处理中,也就是接收到响应主体了
    *4:请求已完成,且响应已就绪,也就是响应完成了
  监听代码示例如下图:

13、AJAX进行网络请求还有其他的方式,如$ajax()、$get()、$post()、$load()等,最常用的还是$ajax({……}),看下篇:http://www.cnblogs.com/XYQ-208910/p/5903920.html

  

Web:AJAX的详解的更多相关文章

  1. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  2. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  3. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  4. Asp.net中web.config配置文件详解(一)

    本文摘自Asp.net中web.config配置文件详解 web.config是一个XML文件,用来储存Asp.NET Web应用程序的配置信息,包括数据库连接字符.身份安全验证等,可以出现在Asp. ...

  5. Java web.xml 配置详解

    在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...

  6. [深入学习Web安全](5)详解MySQL注射

    [深入学习Web安全](5)详解MySQL注射 0x00 目录 0x00 目录 0x01 MySQL注射的简单介绍 0x02 对于information_schema库的研究 0x03 注射第一步—— ...

  7. AJAX请求详解 同步异步 GET和POST

    AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...

  8. java web.xml配置详解

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  9. web.xml文件详解

      web.xml文件详解 Table of Contents 1 listener. filter.servlet 加载顺序 2 web.xml文件详解 3 相应元素配置 1 listener. f ...

  10. $.ajax()常用方法详解(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数 ...

随机推荐

  1. C# DateTime 日期加1天 减一天 加一月 减一月 等方法(转)

    //今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-1).ToShortDateStrin ...

  2. SwfUpload学习记录

    参考资料: SWFUpload 2.5.0版 官方说明文档 中文翻译版 了解SWFUpload 多文件上传配置详解 WEB版一次选择多个文件进行批量上传(swfupload)的解决方案 jQuery轻 ...

  3. 【ArcGis for javascript从零开始】之一 ArcGis加载天地图

    最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...

  4. Shader Model 版本与DirectX的关系(OpenGL对应的呢?)

    http://blog.sina.com.cn/s/blog_6e521a600100q4dr.html DX9还是能支持到固定管线的,虽然说是在内部被转换成shader: DX10明确不再支持固定管 ...

  5. PHP 错误与异常 笔记与总结(11 )register_shutdown_function() 函数的使用

    通过 register_shutdown_function 方法,可以让我们设置一个当执行关闭时可以被调用的另一个函数. 也就是说,当我们的脚本执行完成或者意外死掉导致 php 执行即将关闭时,我们的 ...

  6. A VNC server is already running as :1

    root@host:~# rm -f /tmp/.X1-lock root@host:~# rm -f /tmp/.X11-unix/X1 root@host:~# vncserver -geomet ...

  7. Ruby--String

    --全部转为小写:[STR].downcase --全部转为大写:[STR].upcase --仅仅首字母为大写:[STR].capitalize --每个单词首字母为大写:[STR].titleiz ...

  8. rsync安装及配置

    一.Server端 CentOS 6下安装yum -y install xinetd1.配置:vi /etc/xinetd.d/rsyncservice rsync{    disable = yes ...

  9. Keepalived安装及初步使用

    一.基本规划VIP:192.168.1.11Master:192.168.1.105Backup:192.168.1.102二.安装主备分别安装keepalivedyum -y install kee ...

  10. regardless of how many processors are devoted to a parallelized execution of this program

    https://en.wikipedia.org/wiki/Amdah's_law Amdahl's law is often used in parallel computing to predic ...