原生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 相关文章推荐
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
EasyUI Tree树组件无限循环的解决方法
Sep 27 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 str_replace的替换漏洞
2008/03/15 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Django如何配置mysql数据库
2018/05/04 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
python re模块和正则表达式
2021/03/24 Python
汽车技术服务英文求职信范文
2014/01/02 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript