原生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判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php调用shell的方法
2014/11/05 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python中数据库like模糊查询方式
2020/03/02 Python
python能做哪方面的工作
2020/06/15 Python
python能自学吗
2020/06/18 Python
简述 Python 的类和对象
2020/08/21 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
安全生产检讨书
2014/01/21 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
如何书写邀请函?
2019/06/24 职场文书