AJAX

作者: 前端的爬行之旅 | 来源:发表于2018-06-26 10:05 被阅读8次
    个人理解:

    JavaScript通过异步的形式操作XML文档。

    功能:

    数据交互(获取数据,发送数据)。

    特点:

    异步的形式(节约用户操作时间,减少操作请求,无刷新页面的情况发送请求,可以不通过浏览器地址栏刷新发送请求,ajax内部设置模拟浏览器地址栏刷新,加载数据,可以动态的刷新数据)。

    例如:

    表单验证的时候,输入手机号,通过ajax发送请求,不刷新页面,进行验证。

    1.创建一个ajax对象(有兼容性问题)

    var xhr = new XMLHttpRequest()
    ie6 以下用 new ActiveXObject('Microsoft.XMLHTTP') (ie6内部下面的插件中的XMLHTTP)

    
      // 对象的创建(相当于打开浏览器)
      var xhr = null;
      // if (window.XMLHttpRequest) {
        // xhr = new XMLHttpRequest()
      //} else {
         //xhr = new ActiveXObject('Microsoft.XMLHTTP') 
      //}
      try (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest()
      } catch(e) {
         xhr = new ActiveXObject('Microsoft.XMLHTTP') 
      }
      // 在地址栏输入地址
      /*
        open方法
        参数
             1.打开方式
              2.地址
              3.是否异步(后续的代码需要用到前面的内容需要用到同步。)
      */
      /*
      get方式的两个问题
        参数放在url后面
        1.缓存:在url?后面连接一个随机数,时间戳(&很重要)
        2.乱码:(传递中文会产生乱码)
        xhr.open('get','1.txt?username='+encodeURL('刘伟')+'&age=30&' + new Date().getTime(),true)
       */
      xhr.open('get','1.txt?username=leo&age=30&' + new Date().getTime(),true)
      /*
      post方式
        数据放在send()方法里面作为参数传递。(参数放在请求头中)
        没有缓存问题,没有中文问题
      */
      xhr.open('post','1.txt',true)
      xhr.setRequestHeader('content-type','applicatuion/x-www-form-urlencoded')
      // 生命发送数据的类型
      xhr.send('username=leo&age=30');
      // 发送请求
      xhr.send();
       0:
      // 等待服务器返回内容
      /*
        readyState:ajax工作状态
              0(未初始化):还没有调用open()的方法
              1(载入):以调用send()方法,正在发送请求
              2(载入完成):send()方法完成,已收到全部相应内容
              3(解析):正在解析响应内容
              4(完成):响应内容解析完成,可以在客户端调用了。
        responseText:ajax请求返回的内容就被放在这个属性下面
        onreadystatechange:当状态值改变时触发的事件
        status:服务器状态,http状态码(自行百度吧)
      */
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
             success && success();
          } else {
            alert('出错了,Err:' + xhr.status)
          }
        }
      }
    

    ajax方法

    function ajax (method,url,data,success) {
      var xhr = null;
      try (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest()
      } catch(e) {
         xhr = new ActiveXObject('Microsoft.XMLHTTP') 
      }
     if (method === 'get' && data) {
        url += '?' + data
     }
      xhr.open(method,url,true)
     if (method === 'get' ) {
         xhr.send();
     } else {
        xhr.setRequestHeader('content-type','applicatuion/x-www-form-urlencoded')
        xhr.send(data);
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
         if (xhr.status === 200) {
             success && success(xhr.responseText);
          } else {
            alert('出错了,Err:' + xhr.status)
          }
        }
      }
    }
    

    jquery中的ajax

      ajax({
         //不传默认是get方式
        // data没有可以不配置
        type: 'get',
        url: '',
        data: '',
        success:function (data) {
        }
      })
    

    2.try catch

    try() {
    // 代码尝试执行当前代码块的内容,如果有错误,会执行catch{},并传入错误信息。
    throw new Error('错误信息')
    // js手动抛错(上面没有报错,添加该语句,向下执行报错。)
    } catch(e){
    }
    

    相关文章

      网友评论

          本文标题:AJAX

          本文链接:https://www.haomeiwen.com/subject/pgyzeftx.html