Ajax发送和接到请求

先是Ajax的不刷新页面提交数据,以后利用极其广泛,废话不多说立时进宗旨!!

在做项指标时候,有的时候候要求用到异步数据请求,不过要是那一年没有框架的重视,就必要用到原生JS进行异步数据请求。那时候无非有三种请求情势,一种是AJAX,另五个是JSONP。通过原生JS对异步请求进行简要的卷入。

ajax

大概浏览器能接受的新闻,Ajax都得以接受,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等…..

AJAX

是用来拍卖前后端交互的技巧,可以改革用户体验,其本质是

<script>
  // IE浏览器
  if(ActiveXObject){
     // 微软目前AJAX最新版本
    var ajax = new ActiveXObject("Msxm12.XMLHTTP.6.0"); 
  }else{
    // 主流浏览器
    var ajax = new XMLHttpRequest();
   }

  // 创建HTTP请求
   // open(method, url, asynchronous, user, password);
   // method:请求方法(post,get)
   // url:请求地址(是具体要接收数据的地址)
   // asynchronous:同步或异步请求(true是异步,false是同步,默认是true,可不填)
   // user:(指定请求用户名,可不填)
   // password:(指定请求密码,可不填)
  
  ajax.open('get','url'); 

  ajax.onreadystatechange = function(){
    if((ajax.readyState==4) && (ajax.status)==200){
      alert(ajax.responseText); // 返回的数据内容
    }else{
      alert('请求失败');
    }
  }
  // 发送请求,content是要发送的内容,如果没有则填null
   send(content);
   
   // 如果用的是post方式请求,要在send之前设置HTTP头
   ajax.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

  
</script>

  AJAX是一种多少请求方式,无需刷新整个页面就可见创新局地页面包车型大巴多寡。AJAX的技能中央是XMLHttpRequest对象,首要请求进程如下:

XMLHttpRequest,异步访问服务器并发送请求数据,服务器重返响应的多少,以页面无刷新的效能改动页面中的局地内容

ajax的onreadystatechange事件最多接到多少个调换情形 

  • 创建XMLHttpRequest对象(new)
  • 总是服务器(open)
  • 发送请求(send)
  • 吸收接纳响应数据(onreadystatechange)

一同:职责3个2个的实践,只有前边的职分实行完才会进行下3个职务,要是前方的天职是耗费时间操作,则须求从来守候

readystate的回来状态值:

  不讲话间接贴代码

异步:多条职责并发推行,也便是三个职务的拉开,没有供给静观其变别的任务试行完结,效用较高

  0 (未起初化) 对象已确立

/**
* 通过JSON的方式请求
* @param {[type]} params [description]
* @return {[type]}  [description]
*/
ajaxJSON(params) {
 params.type = (params.type || 'GET').toUpperCase();
 params.data = params.data || {};
 var formatedParams = this.formateParams(params.data, params.cache);
 var xhr;
 //创建XMLHttpRequest对象
 if (window.XMLHttpRequest) {
  //非IE6
  xhr = new XMLHttpRequest();
 } else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
 }
 //异步状态发生改变,接收响应数据
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
   if (!!params.success) {
    if (typeof xhr.responseText == 'string') {
     params.success(JSON.parse(xhr.responseText));
    } else {
     params.success(xhr.responseText);
    }
   }
  } else {
   params.error && params.error(status);
  }
 }
 if (params.type == 'GET') {
  //连接服务器
  xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true);
  //发送请求
  xhr.send();
 } else {
  //连接服务器
  xhr.open('POST', params.url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  //发送请求
  xhr.send(formatedParams);
 }
},
/**
* 格式化数据
* @param {Obj}  data 需要格式化的数据
* @param {Boolean} isCache 是否加入随机参数
* @return {String}   返回的字符串
*/
formateParams: function(data, isCache) {
 var arr = [];
 for (var name in data) {
  arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
 }
 if (isCache) {
  arr.push('v=' + (new Date()).getTime());
 }
 return arr.join('&');
}

ajax的语言载体是JavaScript,最大的特点是页面不刷新

  1(初始化) 已调用open方法

  IE七及其以上版本中帮衬原生的 XH安德拉 对象,由此能够直接用:var oAjax =
new
XMLHttpRequest();。IE6及其从前的本子中,XH卡宴对象是通过MSXML库中的一个ActiveXObject对象落成的。

1、获取ajax对象

  2(发送数据) 已调用send方法

  通过xhr的open函数来连接服务器,首要吸收八个参数:请求格局、请求地址和是不是异步请求(一般都以异步请求)。请求形式有二种,GET和POST,GET是通过U奔驰G级L将数据提交到服务器的,POST则是经过将数据作为send方法的参数发送到服务器。

主流浏览器获取情势:火狐、谷歌(Google)、safari、opera、IE7以上

  三(数据传送中)
已再次回到部分数据

  给xhr绑定状态改造函数onreadystatechange,首要用来检查测试xhr的readyState的扭转,当异步发送成功后,readyState的数值会由0形成四,同时触发onreadystatechange事件。readyState的天性及对应状态如下:

var xhr = new XMLHttpRequest();

  四 (实现) 请求成功

0 (未初叶化) 对象已确立,然则从未初阶化(尚未调用open方法)
一 (初阶化) 对象已建设构造,尚未调用send方法
2 (发送数据) send方法已调用,可是当前的状态及http头未知
三 (数据传送中)
已接到部分数据,因为响应及http头不全,那时通过responseBody和responseText获取部分数额会产出谬误
4 (完毕)
数据接受完成,此时得以经过通过responseBody和responseText获取完整的回答数据

IE7以下

 以上是简轻易单的Ajax请求原理,希望对我们的求学抱有帮忙。

  在readystatechange事件中,先剖断响应是或不是接收完毕,然后判别服务器是或不是中标拍卖请求,xhr.status
是状态码,状态码以二初叶的皆以大功告成,30四象征从缓存中猎取,上边的代码在历次请求的时候都投入了随机数,所以不会从缓存中取值,故该景况不需判别。

var xhr = new ActiveXObject(“microsoft.XMLHttp”);

你或者感兴趣的稿子:

  • AJAX中并且发送多少个请求XMLHttpRequest对象管理情势
  • Extjs
    ajax同步请求时post格局参数发送情势
  • jquery+ajax每秒向后台发送请求数据然后回来页面包车型大巴代码
  • 如何落实ajax延时发送在悠然之后去发送ajax请求
  • jquery跨域请求示例分享(jquery发送ajax请求)
  • jquery的ajax异步请求接收再次来到json数据实例
  • jsp+ajax发送GET请求的章程
  • js与jQuery终止正在发送的ajax请求的不二等秘书籍
  • 防止重复发送Ajax请求的解决方案

JSONP

二、发起呼吁

  假诺还是用地方的XMLHttpRequest对象来发送须要跨域的呼吁,即便调用了send函数,但是xhr的情景向来都是0,也不会触发onreadystatechange事件,这一年就要动用JSONP的请求方式了。

始建请求:xhr.open(请求格局get/post,请求地址);

  JSONP(JSON with Padding)
是1种跨域请求格局。主要原理是行使了script标签能够跨域请求的性状,由其src属性发送请求到服务器,服务器重回js代码,网页端接受响应,然后就径直实施了,那和通过script标签引用外部文件的原理是一致的。

出殡请求:xhr.send(post请求数据/get设置null);

  JSONP由两部分组成:回调函数和数目,回调函数一般是由网页端调整,作为参数发往服务器端,服务器端把该函数和多少拼成字符串重返。

3、接收数据

  举个例子网页端创立一个script标签,并给其src赋值为,
此时网页端就倡导二个呼吁。服务端将在再次回到的数目拼作为函数的参数字传送入,服务端再次来到的数码格式类似”process({‘name:’xieyufei’})”,网页端接收到了响应值,因为请求者是
script,所以一定于直接调用process方法,并且传入了一个参数。

ajax能够接过字符串、html标签、css样式、xml、json

发表评论

电子邮件地址不会被公开。 必填项已用*标注