• 分析ajax请求过程以及请求方法


    ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。据小编翻墙了解到,ajax很早就有了,只不过那时候都不用它,后来谷歌把它用在谷歌地图上,人们感觉使用起来很方便,而且页面不用刷新,用户体验非常好(那时候的网站也没有什么用户体验^_^)

    ajax 原理

    XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户,达到页面无刷新的效果

    
    var xhr = new XMLHttpRequest()
    //IE浏览器使用var xhr = new ActiveXObject
    xhr.open('get', url, true)
    xhr.send(null)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                success(xhr.responseText)
            } else {
                fail && fail(xhr.status)
            }
        }
    }
    

    xhr.open()

    第三个参数:true/fasle 默认值为true
    false就是等待有返回数据的时候再继续往下走,还没有得到数据的时候就会卡在那里,直到获取数据为止。
    true就是不等待,直接返回,这就是所谓的异步获取数据!

    xhr.send

    需要传送的数据,接受一个字符串类型

    xhr.onreadystatechange

    每次状态改变所都会触发的事件处理程序

    xhr.readyState有以下几种状态

    0 请求未初始化,open方法尚未调用

    1 服务器连接已建立,open方法已经调用,尚未调用send方法

    2 请求已接收,也就是接收到头信息了

    3 请求处理中,也就是接收到响应主体了,这时因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误

    4 请求已完成,数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

    xhr.status常见HTTP状态

    0**:未被始化

    1**:请求收到,继续处理

    2**:操作成功收到,分析、接受

    3**:完成此请求必须进一步处理

    4**:请求包含一个错误语法或不能完成

    5**:服务器执行一个完全有效请求失败

    jQuery.ajax

    
    $.ajax({
        url: '',
        Type: '',
        data: '',
        async:true,
        dataType: '',
        beforeSend: function(xhr) {
          xhr.setRequestHeader("Access-Toke");
        },
        success: function (data) {
            fn1()
        },
        error: function (err) {
           error && error(err) 
        }
    })
    fn2()
    

    success-函数

    $.ajax中的success方法是否获取成功的回调,jQuery判断了以下几种状态,在源码中有以下代码(大概位置8193行)

    
    isSuccess = status >= 200 && status < 300 || status === 304
    

    304---通常的说法就是浏览器还有缓存,服务器告诉客户,原来缓存的文档还可以继续使用

    async-布尔值

    async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)

    asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在fn1()这个地方,不会去执行fn2(),知道fn1()部分执行完毕。

    dataType--字符串

    dataType可以指定以下值

    xml:返回XML文档,可用JQuery处理

    html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行

    script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求

    json:返回JSON数据

    jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数

    text:返回纯文本字符串

    beforeSend--函数

    送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数

    ajax优缺点

    优点 : 通过异步,提升用户的体验,减少不必要的数据往返,实现局部刷新

    缺点 : 对搜索引擎支持比较弱

    参考文章:
    jQuery官方文档
    XMLHTTPRequest状态完整列表
    jQuery源码
    JavaScrip进度事件

    来源:https://segmentfault.com/a/1190000017005786

  • 相关阅读:
    hdu 1251(字典树)
    hdu 1556(树状数组)
    hdu 3275(线段树的延迟标记,我被坑了)
    TCL之容器
    Codeforces Round #587 (Div. 3) D. Swords
    struts2中多个文件同时上传
    ffmpeg的使用
    struts2中类型转换器
    struts中访问servlet API的方法
    struts2中多个逻辑action(方法)的动态调用
  • 原文地址:https://www.cnblogs.com/lovellll/p/10152069.html
Copyright © 2020-2023  润新知