zoukankan      html  css  js  c++  java
  • ajax请求过程

    1.什么是ajax

    AJAX=Asynchronous JavaScript and XML  =====>异步的javascript和xml
    AJAX是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术,是一种用于创建快速动态网页的技术。
    XMLHttpRequest 是AJAX的基础,现代所有浏览器均支持XMLHttpRequest对象(IE5、IE6使用ActiveXObject)。

    2.创建ajax实例
    创建XMLHttpRequest对象的语法:

    var  httpObj=new XMLHttpRequest();
    3.向服务器发送请求:使用XMLHttpRequest 对象的 open() 和 send() 方法:
    httpObj.open(method,url,async);
    httpObj.send();       

    send(string )将请求发送到服务器,string仅用于POST请求
          

    • method:请求的类型;GET或POST
    • URL:文件在服务器上的位置
    • async:true(异步)false:(同步)默认是异步

    为了避免get到的是缓存的结果,请向 URL 添加一个唯一的 ID:
    httpObj.open("GET","demo_get.asp?t=" + Math.random(),true);
    httpObj.send();
    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
    httpObj.open("POST","ajax_test.asp",true);
    httpObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    httpObj.send("fname=Bill&lname=Gates");
    setRequestHeader(header,value)向请求添加 HTTP 头。header: 规定头的名称 value: 规定头的值
    当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

    4.请求完毕之后,需要客户端处理:
    onreadystatechange 事件
    readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时,就会触发 onreadystatechange 事件。
    onreadystatechange        存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    readyState        存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。(0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪)
    status                200: "OK" 404: 未找到页面
    当 readyState 等于 4 且状态为 200 时,表示响应已就绪

    很多人不明白readyState这个ajax实例的请求状态和服务器请求结束后给ajax实例返回的status的区别,前者是ajax实例的请求过程的各个状态值,后者是服务器处理请求每一步返回给客户端的状态码

    httpObj.onreadystatechange=function()
      {
      if (httpObj.readyState==4 && httpObj.status==200)
        {
        document.getElementById("ele").innerHTML=httpObj.responseText;

      //如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
          //responseText        获得字符串形式的响应数据。
          //responseXML        获得 XML 形式的响应数据。
        }
      }

    5.服务器响应 结合上篇的http过程
    当请求在第三部send之后,

    首先http是一个应用层的协议,在这个层的协议,只是一种通讯规范,也就是因为双方要进行通讯,大家要事先约定一个规范。

    1.连接 当我们输入这样一个请求时,首先要建立一个socket连接,因为socket是通过ip和端口建立的,所以之前还有一个DNS解析过程,把www.mycompany.com变成ip,如果url里不包含端口号,则会使用该协议的默认端口号。

    DNS的过程是这样的:首先我们知道我们本地的机器上在配置网络时都会填写DNS,这样本机就会把这个url发给这个配置的DNS服务器,如果能够找到相应的url则返回其ip,否则该DNS将继续将该解析请求发送给上级DNS,整个DNS可以看做是一个树状结构,该请求将一直发送到根直到得到结果。现在已经拥有了目标ip和端口号,这样我们就可以打开socket连接了。

    2.请求 连接成功建立后,开始向web服务器发送请求,这个请求一般是GET或POST命令(POST用于FORM参数的传递)。GET命令的格式为:  GET 路径/文件名 HTTP/1.0
    文件名指出所访问的文件,HTTP/1.0指出Web浏览器使用的HTTP版本。现在可以发送GET命令:

    GET /mydir/index.html HTTP/1.0,

    3.应答 web服务器收到这个请求,进行处理。从它的文档空间中搜索子目录mydir的文件index.html。如果找到该文件,Web服务器把该文件内容传送给相应的Web浏览器。

    为了告知浏览器,,Web服务器首先传送一些HTTP头信息,然后传送具体内容(即HTTP体信息),HTTP头信息和HTTP体信息之间用一个空行分开。
    常用的HTTP头信息有:
      ① HTTP 1.0 200 OK  这是Web服务器应答的第一行,列出服务器正在运行的HTTP版本号和应答代码。代码"200 OK"表示请求完成。
      ② MIME_Version:1.0 它指示MIME类型的版本。
      ③ content_type:类型 这个头信息非常重要,它指示HTTP体信息的MIME类型。如:content_type:text/html指示传送的数据是HTML文档。
      ④ content_length:长度值 它指示HTTP体信息的长度(字节)。


    4.关闭连接:当应答结束后,Web浏览器与Web服务器必须断开,以保证其它Web浏览器能够与Web服务器建立连接。

  • 相关阅读:
    java包和jar包
    java异常总结
    java异常练习2
    java中的异常处理机制_函数覆盖时的异常特点
    React(三)TableBar,ToDoList,Redux案例
    React(二)组件通信
    React(二)组件通信
    React(一)起步
    React(一)起步
    Vue(二)进阶
  • 原文地址:https://www.cnblogs.com/-youth/p/6543570.html
Copyright © 2011-2022 走看看