一、原生js通过ajax获取json数据

因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码:

function createXMLHttpRequest(){
try{
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //在IE创建较高版本的ajax对象
}
catch(e){
try{
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//在IE中创建较低版本的ajax对象
}
catch (e){
XMLHttpReq = new XMLHttpRequest(); //其他浏览器ajax对象的创建
}
}
}

创建完Ajax对象之后,下面就是发送Ajax请求。

function sendAjaxRequest() {
createXMLHttpRequest();
XMLHttpReq.open('post', 'test.php', true);
XMLHttpReq.onreadystatechange = response;
XMLHttpReq.send(null);
}

注释:

1. open(method, url, async) 方法需要三个参数:

  method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;然而,在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

 url:规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务));

 async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。

4. readyState:存有服务器响应的状态信息。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

5. responseText:获得字符串形式的响应数据。

接收后台返回的数据

function response() {
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var user = XMLHttpReq.responseText;
user = eval(user); //这里需注意,后台返回的是纯文本数据而不是json数据,要用eval方法转换成json格式的数据
//利用后台返回的json数据自动创建节点,采用拼接字符串的方法
for(var i = 0; i < user.length; i ++){
htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>'   + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
}
$('#container').append(htmlNodes);
}
}
}

eval():与 JOSN.parse() :

两种解析字符串的方法:

eval() :

    eval函数用于将字符串中的JS代码解析出来并执行!!     
      当使用eval函数解析JSON字符串时,需 要在函数内部将JSON字符串用()拼接
        例如:  eval("("+json1+")")
        表示eval函数中的字符串不是用于执行,而是要进行字符串解析
       即:
        eval("("+json1+")") = JSON.parse(json1);

JOSN.parse() :

  纯粹的将JSON字符串解析为数组或对象;

<?php
echo '[ { "name" : "Herry",
"caption" : "还没好好的感受,雪花绽放的气候",
"images" : "images/1.jpg"
},
{
"name" : "Dorry",
"caption" : "我们一起颤抖,会更明白什么是温柔",
"images" : "images/4.jpg"
},
{
"name" : "Money",
"caption" : "还没跟你牵着手,走过荒芜的沙丘",
"images" : "images/5.png"
},
{
"name" : "Herry",
"caption" : "可能从此以后学会珍惜,天长和地久",
"images" : "images/2.jpg"
},
{
"name" : "Herry",
"caption" : "有时候有时候,我会相信一切有尽头,相聚离开都有时候,没有什么会永垂不朽",
"images" : "images/3.jpeg"
} ]';

二、用jquery通过ajax获取json数据

$.ajax({
url: 'test.php?' + Math.random(), // 后面加个随机数是清除缓存
type: 'get',
dataType: 'json',
success: function (user) {
//字符串拼接
var htmlNodes = '';
for(var i = 0; i < user.length; i ++){
htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
} $('#container').append(htmlNodes);
}
});

后台文件与上面的php文件相同

总结:1.web开发越来越倾向于用ajax异步获取数据,从上面两个例子可以看到用jquery框架处理ajax异步远比用原生js要简单和有效率的多,而且jquery封装的很棒的$.ajax(),$.get(),$.post()等方法可以提高网页的性能,推荐使用jquery处理异步。

原生js,jquery通过ajax获得后台json数据动态新增页面元素的更多相关文章

  1. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  2. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  3. 使用ajax解析后台json数据时:Unexpected token o in JSON at position 1

    json数据解析异常 今天在做json数据的时候,出现了如下错误,说是解析异常. VM1584:1 Uncaught SyntaxError: Unexpected token o in JSON a ...

  4. jquery的ajax,请求JSON数据。

    第一个页面:1.htm <!DOCTYPE html> <html> <head> <title></title> <script t ...

  5. 前端 ajax 获取后台json数据 解析

    先贴代码 function edit(node) { ).text(); alert(customerid) $.ajax({ type: "post", url: "/ ...

  6. js获取后台json数据显示在jsp页面元素

    jsp id <font size=2 >Today:</font> <font id ="todaytotal" size=2 color=&quo ...

  7. AJAX请求返回JSON数据动态生成html

    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...

  8. echart表格,动态的通过ajax从后台获取数据动态的展示数据

    官网上都是介绍的echar表格的展示方法,但是都是静态数据,一开始的时候我总是纳闷,这些数据都是怎么上上去的 , 后来通过一些方法,当然这些方法也不是我自己写出来的,也是通过在网上收集了一下 ,现在才 ...

  9. jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("dem ...

随机推荐

  1. 波兰政府在继韩国之后也增加了对 Linux 的使用

    导读 前段时间, 韩国政府起草了一项战略,准备采用基于 Linux 的开源操作系统全面取代 Windows 7,以摆脱对其的依赖. 目前,波兰的社会保险公司 ZUS( Zakład Ubezpiecz ...

  2. 一文掌握Redis的三种集群方案

    在开发测试环境中,我们一般搭建Redis的单实例来应对开发测试需求,但是在生产环境,如果对可用性.可靠性要求较高,则需要引入Redis的集群方案.虽然现在各大云平台有提供缓存服务可以直接使用,但了解一 ...

  3. apply 和 call 方法详解【转载】

    本文转载至:http://blog.csdn.net/business122/article/details/8000676 我在一开始看到javascript的函数apply和call时,非常的模糊 ...

  4. jwt(JSON Web Tokens)的一道题目代码分析

    题目链接https://github.com/wonderkun/CTF_web/tree/5b08d23ba4086992cbb9f3f4da89a6bb1346b305/web300-6 参考链接 ...

  5. 补充《解析“60k”大佬的19道C#面试题(上)》

    [广州.NET技术俱乐部]微信群的周杰写了一篇文章<解析“60k”大佬的19道C#面试题(上)>https://www.cnblogs.com/sdflysha/p/20200325-19 ...

  6. 报错:Error instantiating class com.liwen.mybatis.bean.Employee with invalid types () or values ().

    实体类默认构造方法是无参构造方法,一旦重写构造方法,默认方法就会变成重写之后的构造方法,所以该错误报的错就是实体类缺少无参构造方法

  7. 五、运算符的补充与if语句

    1.可变不可变类型 指:对前面所学类型做一个可变和不可变类型的分类 可变类型:值改变,ID不变,证明改的是原值,原值是可以被改变的 不可变类型:值改变,ID也变了,证明是产生新的值,压根没有改变原值, ...

  8. [LeetCode] 936. Stamping The Sequence 戳印序列

    You want to form a `target` string of lowercase letters. At the beginning, your sequence is target.l ...

  9. 使用 keras 和 tfjs 构建血细胞分类模型

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识!

  10. PTA-7-20 表达式转换(中缀转后缀,带括号,负数,小数转换)

    本题考点:中缀表达式转后缀表达式. 难点: 带有小数的数字 数字可能带有正负号 题目描述: 算术表达式有前缀表示法.中缀表示法和后缀表示法等形式.日常使用的算术表达式是采用中缀表示法,即二元运算符位于 ...