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标签加载对应远程文件资源,当远程的文件资源加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当做这个函数的参数传入进去。

  • 相关阅读:
    SVN的安装和使用手册
    高德坐标/百度地图获取经纬度
    MVC中返回json数据的两种方式
    [译]Flutter JSON和序列化
    ios 网络字节顺序的转换HTOS
    [swift]可选类型
    向OC类中添加默认的协议实现(ProtocolKit)
    [swift] NSClassFromString 无法获得该类
    Swift与Objective-C的兼容“黑魔法”:@objc和Dynamic
    iOS 9适配技巧
  • 原文地址:https://www.cnblogs.com/effieduo/p/5166559.html
Copyright © 2011-2022 走看看