ajax 5年前

ajax

定义 ：异步的JavaScript 和 XML
是一种综合技术:运用了XMLHTTPRequest (xhr) 和服务器交换数据，通过JavaScript 局部渲染页面，从而实现异步的局部更新

同步与异步

同步 代码按顺序执行，会阻塞代码执行(alert)
异步 不会阻塞代码

XMLHTTPRequest xhr

copy
var xhr = new XMLHttpRequest();
        xhr.open("GET",'./be.txt',true)
        //打开的方法 地址 是否异步
        xhr.send();
        // 发送出去
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4&&xhr.status == 200){
            /* 如果xhr的状态是第4个状态 响应码为200 */
            console.log(xhr.responseText);
            //输出ajax 返回的文本内容
            pp.innerHTML = xhr.responseText
        }
    }

xhr

• open()
• send()
• setRequestHeader()
• xhr.readtstate
  • 0,未初始化
  • 1，请求参数已准备，尚未发送请求
  • 2，已经发送请求，尚未接收响应
  • 3，正在接收部分响应
  • 4，响应全部接收完毕
• stateText () 响应码
• stateText 响应文本 Ok代表成功

优缺点

优点

1. 不刷新更新页面，提升用户体验
2. 异步的 提升页面的加载速度
3. 减轻服务器压力，实现浏览器渲染

缺点

• 对搜索引擎不友好

文件上传

copy
var xhr = new XMLHttpRequest();
        // 建立xhr对象
        xhr.open("POST","https://www.520mg.com/ajax/file.php",true);
        // 打开http连接
        var data =  file.files[0];
        // 获取文件
        var fdata = new FormData();
        fdata.append("file",data);
        // 获取formData 要传递的表单文件
        // 监听xhr的加载事件
        xhr.upload.onprogress =function(e){
            // console.log(e);
             // 监听上传文件的进度
            console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%")
            // e。loaded是已上传，e.total总文件大小
        }
         xhr.onload = function(){
               console.log(xhr);
            var res = JSON.parse(xhr.responseText);
            // 把json字符串转换为javascript对象
            if(res.error==0){
                var img = document.createElement("img");
                img.src ="https://www.520mg.com"+res.pic;
                img.width=100;
                // 创建一个图片 设置 src 与宽
                document.body.append(img);
                // 插入到页面中

            }

           }
        xhr.send(fdata);
        // 发送

ajax jquery

• $.ajax()
• $.get()
• $.post()
• 第三层
  • elem.load(xx) 加载xx内容 到elem元素
  • $.getScript(xxx) 加载xxx文件 执行js
  • $.getJSON(xx) 加载xx文件
• 所有的jquery ajax方法 都支持三种写法

  
  copy
  $.getJSON(url,function(response,status.xhr){
       /* url 请求的地址
        function 请求成功回调函数
        response 请求响应的数据
        status 'successs'
        xhr.jquery的Promise 对象*/
    })
  
  

jquery ajax 相关函数调用方式

1. 回调函数

   
   copy
   $.getJSON(url,function(res,status,xhr){})
   
    //2. promise 函数
   
    $.getJSON(url)
    .then(res=>{})
    .catch(err=>{})
   
    $.getJSON(url)
    .done(res=>{})
    .fail(err=>{})
    .always(res=>{})
   
   

   fetch

   get

   
   copy
   fetch(url)
    .then(res=>res.json{})
    .then()
   
   

   post

   
   copy
   fetch(url,{
        method:'POST',
        body:"name=xiaoming&age=18",
        headers:{'Content-Type':'application-x/www-form-urlencodeed'}
    })
    .then()
    .then
   
   

加载提示

copy
$(document).ajaxStart(function(){})
// 开始ajax

copy
$(document).ajaxStop(function(){})
// 结束ajax

$.ajax({})

• url 请求的地址
• method 请求的方法 GET | POST
• dataType 返回数据类型 json jsonp text
• jsonp 跨域回调方法 默认 callback
• success 成功
• error 失败
• done 完成
• fail 失败
• beforeSend 发送前
• compelete 发送完毕
• Content-Type:'application/x-www-form-urlcoded'

$.get $.post

• url
• data(可选)
• function(res,status,xhr)

jquery ajax Promise 对象

• .then
• .catch
• .done
• .fail
• .always
• status 状态 200
• statusText ok
• readyState 4