zoukankan      html  css  js  c++  java
  • 原生js之四步走搞定Ajax

          说到Ajax,不得不先提一下HTTP(HTTP,HyperText Transfer Protocol)协议,中文名:超文本传输协议,是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。一次HTTP请求,包含了两个重要的部分:上行request(请求)和下行response(响应)

      HTTP协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源,而HTTP中的GET, POST, PUT,DELETE就对应着对这个资源的查,改,增,删4个操作。 我们最常见的也是我们关心的就是GET和POST了。GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。

    我们看看GET和POST的区别:

    1. GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的数据放在HTTP包的Body中.

    2. GET提交的数据大小有限制(因为浏览器对URL的长度有限制,本身并没有限制),而POST方法提交的数据没有限制。

    3. GET方式提交数据,会带来安全问题,比如一个登录页面,通过GET方式提交数据时,用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问这台机器,就可以从历史记录获得该用户的账号和密码。

    如果你使用chrome浏览器的话,可以再下面的页面中看到这两种请求携带的信息:

      通常,浏览器产生HTTP请求,是由于用户输入了新的网址、或者点击了超级链接,使页面跳转,这将导致页面的全局刷新。Ajax(Asynchronous Javascript And XML:异步JavaScript和XML)技术,可以使网页悄悄地、偷偷地发起HTTP请求,请求回来的数据在页面局部刷新呈递。ajax的使用其实很简单:
    第一步,new出一个XMLHttpRequest对象:
    这里变量名xhr可以随便起,只是一般工程师都喜欢使用这个名字,就像var arr一样,姑且当做一种约定俗成的东西就好,方便大家交流。
    第二步,处理服务器上面返回的响应:

    其中,if语句小括号中的的语句:readyState表示返回XMLHTTP请求的当前状态,具体数值示意如下:
     
    0 (未初始化)
    对象已建立,但是尚未初始化(尚未调用open方法)
    1 (初始化)
    已调用send()方法,正在发送请求
    2 (发送数据)
    send方法调用完成,但是当前的状态及http头未知
    3 (数据传送中)
    已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
    4 (完成)
    数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
    第三步,创建一个请求,第一个参数是请求的类型get或者post,第二个参数就是请求的路径,第三个参数叫做是否使用异步机制:


    如果是post请求,在发送请求前需要做以下处理:
    第四步,发送请求:

    总结一下:

     

  • 相关阅读:
    python---逻辑运算(and、or、not)
    VsCode预览HTML文件的方法
    Windows10下composer的安装以及配置
    Centos7上SVN客户端的安装和使用
    Centos7安装redis
    centos7下解决yum install mysql-server没有可用包
    Centos7 安装的mysql 报错 Unit mysqld.service entered failed state.
    Redis的一些规范
    PHP安装Redis扩展
    bzip2:无法 exec: 没有那个文件或目录
  • 原文地址:https://www.cnblogs.com/fenpho/p/6240158.html
Copyright © 2011-2022 走看看