原生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之可拖动的iframe效果代码
Aug 01 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
javascript检测两个数组是否相似
May 19 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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文件的实现方法
2007/03/19 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JS实现多选框的操作
2020/06/24 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
python属于哪种语言
2020/08/16 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
PHP如何与mysql建立链接
2013/05/05 面试题
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
几个Linux面试题笔试题
2016/08/01 面试题
行政文员岗位职责
2013/11/08 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
探亲邀请信范文
2014/01/30 职场文书
中专生自荐信
2014/06/25 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书