AJAX

2018-06-26  本文已影响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){
}
上一篇下一篇

猜你喜欢

热点阅读