原生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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
JqGrid web打印实现代码
May 31 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
Javascript玩转继承(三)
May 08 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
试用php中oci8扩展
2015/06/18 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
jQuery 表格插件整理
2010/04/27 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jquery延迟对象解析
2016/10/26 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python manage.py runserver流程解析
2019/11/08 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
保护环境倡议书100字
2014/05/19 职场文书
工地材料员岗位职责
2015/04/11 职场文书
工作收入证明范本
2015/06/12 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书