zoukankan      html  css  js  c++  java
  • Web:AJAX的详解

    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

      

  • 相关阅读:
    Android OpenGL ES 2.0 (四) 灯光perfragment lighting
    Android OpenGL ES 2.0 (五) 添加材质
    冒泡排序函数
    javascript object 转换为 json格式 toJSONString
    Liunx CentOS 下载地址
    jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动
    javascript 解析csv 的function
    mysql Innodb Shutdown completed; log sequence number解决办法
    Centos 添加 yum
    javascript 键值转换
  • 原文地址:https://www.cnblogs.com/XYQ-208910/p/5990371.html
Copyright © 2011-2022 走看看