原生js调用json方法总结


Posted in Javascript onFebruary 22, 2018

Ajax基础

ajax:无刷新数据读取,读取服务器上的信息

HTTP请求方法:

GET:用于获取数据,如浏览帖子

ajax.judgeXmlHttpRequest('get', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
})

POST:用于上传数据,如用户注册

var dataJson = {
  name: 'ys',age: 123 
}
ajax.judgeXmlHttpRequest('post', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
},dataJson)

GET与POST的区别:

GET:通过网址传递(放入url中),会将传递的数据放到网址上面,名字=值&名字=值

get方式容量小,安全性低,有缓存

POST:不通过网址传递

post容量较大,一般可达2G,安全性相对较高,没有缓存

原生Ajax的编写

Ajax运行步骤

创建一个Ajax对象

非IE6浏览器:

var oAjax=new XMLHttpRequest();

IE6浏览器:

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

连接到服务器

Ajax.open(方法,文件名,异步传输);

阻止缓存方法:

Ajax.open('GET','a.txt?t='+new Date().getTime(),true);

同步:js中指事情必须一件一件来

异步:js中指多件事情要一起做

ajax是做异步传输的,并不是同步

发送请求

Ajax.send();

接收返回值

请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发,主要通过readyState属性来判断结束没有,结束了也并没有代表成功,status属性来判断

readyState属性:请求状态

0(未初始化)还没有调用open方法

1(载入)已经调用send()方法,正在发送请求

2(载入完成)send()方法完成,已经收到全部相应内容

3(解析)正在解析收到的响应内容

4(完成)响应内容解析完成,可以在客户端调用(完成并不一定成功,需要status来检测是成功还是失败)

status属性:

请求结果,是成功(200)还是失败(404):Ajax.status==200

返回值responseText:

从服务器返回来的文本:Ajax.responseText(返回的值是一个字符串,有时需要进一步处理成其他格式的形式)

oAjax.onreadystatechange=function(){
  //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了
  if(oAjax.readyState==4){ //读取完成
    if(oAjax.status==200){ //读取的结果是成功
      alert('成功:'+oAjax.responseText);
    }
  }
}

将原生Ajax封装成一个函数使用,最终编写的原生Ajax为:

GET方法封装的函数为:

function ajax(url,fnSuccess,fnFaild){
  //1.创建Ajax对象。js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined。IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用
  if (window.XMLHttpRequest) {
    var oAjax=new XMLHttpRequest();//非IE6
 }else{
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6
 
}
  //2.连接到服务器
  oAjax.open('GET',url,true);
  //3.发送请求
  oAjax.send();
  //4.接收返回值
  oAjax.onreadystatechange=function(){
    //oAjax.readyState--浏览器和服务器之间进行到哪一步了
    if(oAjax.readyState==4){ //读取完成
      if(oAjax.status==200){ //读取的结果是成功
        fnSuccess(oAjax.responseText); //成功时执行的函数
   
 }else{
    
  if(fnFaild){  //判断是否传入失败是的函数,即用户是否关心失败时的结果
     

 fnFaild(oAjax.responseText); //对失败的原因做出处理
    
  }
   
 }
  
 }
 
}
  }

POST方法封装的函数为:

function ajaxPost(url,id,fnSuccess,fnFaild){
  //1.创建Ajax对象
  if (window.XMLHttpRequest) {
    var xhr=new XMLHttpRequest();//非IE6
  }else{
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE6
  }
  //2.连接到服务器
  xhr.open("POST",url,true);
  //设置头信息
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  var form=document.getElementById(id);
  //3.发送请求,传递数据
  xhr.send(serialize(form));
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
      if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) {
        fnSuccess(xhr.responseText);
      }else{
        fnFaild(xhr.responseText);
      }
    }
  };
}

字符集编码:网页和被请求的文件的编码要相同,如都是utf8

缓存,阻止缓存(经常改变的数据等,不能够缓存.主要用于GET方法),传参时在路径后面加?+'可变的数据' 可以不影响原数据

ajax('a.txt?t='+new Date().getTime(),function(str){
  alert(str);
},function(str){
  alert(str);
});

ajax请求动态数据:如json文件

1 ajax返回值是一个字符串,可通过eval转换后来读取返回的数组/json数据

alert(str);
alert(typeof(str));
var arr=eval(str);
alert(typeof(arr));
alert(arr[1]);
alert(arr[1].c);

2 结合DOM创建元素,来显示返回的内容

oBtn.onclick=function(){
  ajax('data/arr3.txt?t='+new Date().getTime(),function(str){
    var arr=eval(str);
    for (var i = 0; i < arr.length; i++) {
      var oLi=document.createElement('li');
      oLi.innerHTML='用户名:<span>'+arr[i].user+'</span>密码:<span>'+arr[i].pass+'</span>';
      oUl.appendChild(oLi);
    }
  },function(str){
    alert(str);
  });
}

数据类型-->返回的数据类型可能是xml(几乎已经淘汰),json(现在常用)

下面来看个我最近刚写原生js通过get方法调用json的例子:

if(!isNaN(matchId)) {
  var xmlHttp = null;
  try {// Chrome, Firefox, Opera, Safari
    xmlHttp = new XMLHttpRequest();
  }catch (e) {
    try {// Internet Explorer IE 6.0+
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {// Internet Explorer IE 5.5+
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("your browser not support ajax!");
      }
    }
  }
  window.onload = function () {
    xmlHttp.open("get",/api/clientMatch/commonMatchDiagram.json?matchId=" + matchId,true);
    xmlHttp.send();
    xmlHttp.onreadystatechange = doResult; //设置回调函数
  };
  function doResult() {
    var html='';
    if ((xmlHttp.readyState == 4)&&(xmlHttp.status == 200)) {//4代表执行完成,200代表执行成功
      var data = JSON.parse(xmlHttp.responseText);
      if(data.code == 200){
      //代码执行
      }
      document.getElementById('appMatch').innerHTML = html;
    }
  }
}

 

Javascript 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
babel的使用及安装配置教程
Feb 22 #Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 #Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 #Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 #Javascript
babel之配置文件.babelrc入门详解
Feb 22 #Javascript
javascript填充默认头像方法
Feb 22 #Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 #Javascript
You might like
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python中logging模块的用法实例
2014/09/29 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
高级销售员求职信
2013/10/25 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
大学生暑期实践感言
2014/02/26 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
委托书如何写
2014/08/30 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书