一、原生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. 我要打十个!详解建造者模式(builder pattern)

    前言 "我要打十个",其实是我要打十个野怪! 这十个野怪呢,它们有不同的技能.装备和武器,长得也不一样.这里野怪是一个蛮复杂的对象,由各个不同的部分组成(技能.装备.武器等),不同 ...

  2. jadx初识

    一.jadx介绍 一款相对流行的反编译工具 下载:https://github.com/skylot/jadx/releases/tag/v1.0.0 解压后得到这么几个文件: 启动:(以下来两个文件 ...

  3. [日志分析]Graylog2采集Nginx日志 主动方式

    这次聊一下Graylog如何主动采集Nginx日志,分成两部分: 介绍一下 Graylog Collector Sidecar 是什么 如何配置 Graylog Collector Sidecar 采 ...

  4. Java多线程并发03——在Java中线程是如何调度的

    在前两篇文章中,我们已经了解了关于线程的创建与常用方法等相关知识.接下来就来了解下,当你运行线程时,线程是如何调度的.关注我的公众号「Java面典」了解更多 Java 相关知识点. 多任务系统往往需要 ...

  5. google recaptcha-v2

    最近在给公司的网页把传统的输入字符数字的验证码改google reCAPTCHA验证,就写写我学到的和一些我的理解!说得不好请勿怪!有兴趣可以的去https://developers.google.c ...

  6. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  7. Java基础 - 数据类型和运算符

    Java 语言支持的类型分为两类:基本数据类型(Primitive Type)和引用类型(Reference Type). 目录 基本数据类型 数值类型 整数类型 byte short int lon ...

  8. python制作一键启动脚本

    我们的系统环境或许没有Python环境,又想使用脚本,这就要使该脚本能脱离Python环境独立运行,比如说将该脚本打包成exe可执行文件等.那么怎么做呢?你可能想到py2exe和pyinstaller ...

  9. MySQL----多表操作

    ##多表之间的关系 1.一对一(了解) * 如:人和身份证 * 分析:一个人只有一个身份证,一个身份证只能对应一个人. 2.一对多(多对一) * 如:部门和员工 * 分析:一个部门有多个员工,一个员工 ...

  10. Spring02——Spring 中 Bean 的生命周期及其作用域

    在前一篇文章中,我们已经介绍了 Spring IOC 的相关知识,今天将为个位介绍 Spring 中 Bean 的相关知识.关注我的公众号「Java面典」,每天 10:24 和你一起了解更多 Java ...