• 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

      

  • 相关阅读:
    网络爬虫之框架(Scrapy)
    模拟投币试验
    [LeetCode#177]Nth Highest Salary
    Windows Server 2008 各版本功能差异与比较各版本概观--转载
    Win2008 R2下Server Core常用命令小结
    powershell 中用Sqlps管理我台sqlserver 2008r2
    初识 Markdown
    React 入门(3): 严格模式 ReactDOM
    ES6 类的正确定义方式 公有类字段 getter / setter
    Lodash 去抖动 节流
  • 原文地址:https://www.cnblogs.com/XYQ-208910/p/5990371.html
Copyright © 2020-2023  润新知