zoukankan      html  css  js  c++  java
  • Ajax

    什么是Ajax

    AJAX(Asynchronous javascript and xml)用JavaScript 以异步的形式操作 xml (现在操作的是json)

    • Web的传统模型。客户端向服务器发送一个请求,服务器返回整个页面,如此反复

        form表单传输数据的方式就属于传统的web模型,当我们提交数据后会刷新整个页面,在新的页面中返回内容。

        form表单有三个很重要的属性,分别是

      1. method:规定发送数据的http方式,一般是get或者post

      2. action:要把数据传送到的地址

      3. enctype:规定在发送表单数据之前如何对其进行编码

            enctype的默认值是 “application/x-www-form-urlencoded”,即在发送前编码所有字符,这个属性值即使我们不写也是默认这个的。

               multipart/form-data (<input type='file'>) 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值

    • AJAX模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。(异步局部地获取数据,大大改善了Form表单的缺点)

    Ajax重要的两个对象

    new XMLHttpRequest() 和new ActiveXObject('Microsoft.XMLHttp') 一般的主流浏览器支持第一个方法,IE6以下用第二个方法。

    对象的方法

    方法 描述
    abort  停止当前的请求
    getAllResponseHeaders 把http请求的所有响应首部最为键/值返回
    getResponseHeaders(‘headerLabel’)  返回指定首部的串值
    open(‘method’, ‘url’, ‘true’) 

    建立对服务器的调用,method参数可以是get、post或者put。

    url参数可以是相对url或者绝对url,

    第三个参数是选择异步还是同步,异步是true。

    这个方法还包括三个可选参数。

    send(string) 向服务器发送请求     string:仅用于 POST 请求
    setRequestHeader(‘header’, ‘value’) 

    向请求添加 HTTP 头。之前必须调用open方法

    header: 规定头的名称

    value: 规定头的值

    对象的属性

    属性 描述
    onreadystatechange 状态改变触发器
    readyState 对象的状态,状态值

    0代表未初始化,未调用send()方法

    1代表读取中,已调用send(),正在发送请求

    2代表已读取,send方法执行完成,接收到全部响应内容

    3代表交互中,正在解析响应内容

    4代表完成,响应内容解析完成

    responseText  

    获得字符串形式的响应数据

    responseXML

    获得XML形式的响应数据

     

    status

     服务器返回的状态码,如:404 = “文件未找到”、200 = “成功” 500 = “服务器内部错误” 304=“资源未被修改”
     

    statusText

     

    服务器返回的状态文本信息

    AJAX创建流程

    1.生成一个ajax对象

    2.通过ajax对象 open(method,url,flag)方法初始化请求;

    3.通过ajax对象 send发送数据

    4.通过ajax对象的onreadystatechange来监听状态改变,当数据请求成功之后就可以操作数据了(readyState == 4&&status==200)

    下面封装一个属于自己的ajax

     1 function ajax(method, url, callback, data, flag) {
     2     var xhr = null;
     3     if(window.XMLHttpRequest) {
     4         xhr =  new XMLHttpRequest();
     5     }else {
     6         xhr = new ActiveXObject('Microsoft.XMLHttp')
     7     }
     8     xhr.onreadystatechange = function() {
     9         if(xhr.readyState == 4) {
    10             if(xhr.status == 200) {
    11                 callback(xhr.responseText);
    12             }else {
    13                 console.log('error');
    14             }
    15         }
    16     }
    17     method = method.toUpperCase();
    18     if(method == 'GET') {
    19         var date = new Date(),
    20             timer = date.getTime();
    21         xhr.open(method, url + '?' + data + '&timer=' + timer, flag);
    22         xhr.send();
    23     }else if(method == 'POST') {
    24         xhr.open(method, url, flag);
    25         xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    26         xhr.send(data);
    27     }
    28 }
    View Code
  • 相关阅读:
    电脑网络连接正常,无法连接浏览器,无法上网
    幂等性
    jvm问题解决
    Mybatis设计模式
    单进程单线程的Redis如何能够高并发
    分布式锁(Zookeeper)
    MyBatis 的 DAO 接口跟 XML 文件里面的 SQL 是如何建立关系的
    ArrayList、LinkedList、Vector、HashSet、Treeset、HashMap、TreeMap的区别和适用场景
    时间函数-线程安全
    socket
  • 原文地址:https://www.cnblogs.com/freefy/p/9656940.html
Copyright © 2011-2022 走看看