zoukankan      html  css  js  c++  java
  • ajax

    一、ajax概念

      ajax : 全称是Asynchronous Javascript and XML  (异步的javascript和XML),用异步的模式实现javascript和XML的一个互相的操作,也就是说javascript通过异步的形式去操作XML对象。

      ajax主要的工作:是数据交互,可以从某个地方去拿取数据,也可以把某个数据发送到某个指定的地方去,我们通过浏览器输入一个地址,发了一个请求到服务端去请求一个文件,然后把这个文件的内容请求过来,这就完成了一个数据的交互

      通过ajax来获取数据的好处 : 1) 节省用户操作、时间;2)提高用户体验;3)减少数据请求

    二、ajax基本流程的原理

      1、创建一个ajax对象 new XMLHttpRequest(); 让其打开浏览器

        兼容:ie6下 : new ActiveXObject('Microsoft.XMLHTTP');

        处理方案:try{

                new XMLHttpRequest();    // 代码尝试执行这个块中的代码,如果有错误,则会执行catch{},并且传入一个错误参数信息

              }catch(e){

                new ActiveXObject('Microsoft.XMLHTTP');

              }

      2、在地址上输入信息: open(打开方式,地址,是否异步);

                 是否异步:异步 : 非阻塞模式,前面的代码不会影响后面的代码

                      同步 : 阻塞模式,前面的代码会影响后面的代码

      3、提交 : send(); 发送请求

      4、等待服务器返回内容

        1) responseText : 属性 ajax请求返回的内容都以字符串类型存放在responseText下面

        2) onreadystatechange : 事件  当readystate改变的时候触发

        3) readyState : 属性    ajax工作的状态,有五个值:

          ● 0 : (初始化)请求初始化,还没有调用open()方法

          ● 1 : (载入)服务器连接也建立,已调用send()方法,正在发送请求

          ● 2 : (载入完成)请求已接收,send()方法完成

          ● 3 : (解析)请求处理中,正在解析响应内容

          ● 4 : (完成)请求已完成,且响应已就绪,可以在客户端调用了

        4) status : 服务器状态,http状态码 : 用以表示网页服务器HTTP响应状态的3位数字代码

          当readyState == 4 && status == 200时,就表示响应已就绪

    三、open方法和表单的打开方式

      1、表单 : 数据的提交

        1) action : 数据提交的地址,默认是当前页面

        2) method : 数据提交的方法,默认是get方式

          ● get  把数据名称和数据值用=连接,如果有多个的话,则把多个数据组用&进行连接,然后把数据放到url?后面传到指定页面

                    缺点 : 1、会被缓存,因此会泄露用户的隐私

                  2、url长度限制的原因,不能通过get方式传递过多的数据

          ● post    1、不会被缓存

                2、理论上无限制的

        3) enctype : 提交的数据格式,默认是application/x-www-form-urlencoded

      2、open()方法

        ● get   open('get','url?username='+encodeURI('爱')+''+new Date().getTime(),true);

            1、缓存问题,在url?后面连接一个随机数或时间戳

            2、在传递中文时,会出现乱码 : 用encodeURI()解决

        ● post  setRequestHeader('content-type','application/x-www-form-urlencoded');  // 第二个参数是申明发送的数据类型

            send(数据);

            1、没有缓存问题

            2、没有中文乱码问题

    四、ajax的跨域请求限制

      1、跨域请求限制:浏览器因为安全限制的原因,是不允许跨域请求的。

      2、跨域 : 也就是跨域名。一个域名下的文件去请求了和他不一样的域名下的资源文件,那么就会产生跨域请求

      3、解决ajax跨域问题的方法:1) 本地代理 : 通过服务端中转,也就是说通过服务端的代码进行代理

                    2) 用flash去请求资源 : 服务端有一个crossdomain.XML的跨域文件,这个文件会列出很多域名,这些域名就是能够去访问这个资源的域名。如果你访问当前服务器的域名在当前crossdomain.XML文件里能够找到的话就允许访问

                    3) script tag : 用script标签加载资源文件,且没有跨域问题,这种方法叫做JSONP

    五、JSONP

      1、JSONP : 全称是 json with padding

      2、JSONP的流程 : 1) 在资源加载进来之前定义好一个函数(要保证这个函数在全局作用域中),这个函数接收一个参数(数据),函数里面利用这个参数做一些事情。

               2) 然后在需要的时候通过script标签加载对应远程文件资源,当远程的文件资源加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当做这个函数的参数传入进去。

  • 相关阅读:
    NanoProfiler
    NanoProfiler
    Open Source Cassandra Gitbook for Developer
    Android Fragment使用(四) Toolbar使用及Fragment中的Toolbar处理
    Android Fragment使用(三) Activity, Fragment, WebView的状态保存和恢复
    Android Fragment使用(二) 嵌套Fragments (Nested Fragments) 的使用及常见错误
    Android Fragment使用(一) 基础篇 温故知新
    Set up Github Pages with Hexo, migrating from Jekyll
    EventBus源码解析 源码阅读记录
    Android M Permission 运行时权限 学习笔记
  • 原文地址:https://www.cnblogs.com/effieduo/p/5166559.html
Copyright © 2011-2022 走看看