一、定义

  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

<script type="text/javascript" src="./js/lib/jquery.js"></script>

<script type="text/javascript">

	$(function(){

		$('button').click(function(){show();});

	});

	function show(){

		$.getJSON("./source/student.json",function(stu){ 　　　　　　　　　　//在“./source/student.json”

									　　　　　　　　//地址里找到文件，然后调用函数，stu为这个文件对象

				$("#tab").empty();  　　　　　　　　　　　　　　 //防止多次刷新出现重复值，即每次点击按钮之后会先清空表格里的内容

				$('#tab').append("<tr><td>"+stu.name+"</td><td>"+stu.age+"</td></tr>");

		});

	}

</script>

</head>

<body>

	<button>点我刷新数据</button>

	<table>

		<tr>

			<th>姓名</th>

			<th>年龄</th>

		</tr>

	</table>

	<table style="border-style:solid;width:150px;height:20px;" id="tab">

		<tr>

			<td></td>

			<td></td>

		</tr>

	</table>

</body>

　　

student.json：

　　　　{"name":"张三","age":"15"}

结果：

ps：如果json文件里只有一个对象，即｛“name”:"张三"，"age","15"｝ 则不用each循环即可获取数据，即

function（stu）｛//stu.name,stu.age取值｝

如果是json文件里有不止一个对象，即【｛“name”:"张三"，"age","15"｝，｛“name”:"李四"，"age","16"｝】

注意一定要加大括号，一定要用each循环才能读取数据，如果只有一个对象加了大括号也被当成多个对象。

<script type="text/javascript" src="./js/lib/jquery.js"></script>

<script type="text/javascript">

	$(function(){

		$('button').click(function(){show();});

	});

	function show(){

		$.getJSON("./source/student.json",function(stu){ //在“./source/student.json”

				$("#tab").empty();

				$.each(stu,function(i,n){

					$('#tab').append("<tr><td>"+n.name+"</td><td>"+n.age+"</td></tr>");

				});

		});

	}

</script>

</head>

<body>

	<button>点我刷新数据</button>

	<table>

		<tr>

			<th>姓名</th>

			<th>年龄</th>

		</tr>

	</table>

	<table style="border-style:solid;width:150px;height:20px;" id="tab">

		<tr>

			<td></td>

			<td></td>

		</tr>

	</table>

</body>

结果：

（五）AJAX技术的更多相关文章

  1. Ajax 技术一

    一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...

  2. 14.javaweb AJAX技术详解

    一.简介 1,  ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2,  核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...

  3. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  4. Ajax技术---核心XMLHttpRequest对象

    Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...

  5. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  6. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  7. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  8. Ajax技术详解

    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...

  9. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  10. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

随机推荐

  1. java中的assert

    Java陷阱之assert关键字   一.概述   在C和C++语言中都有assert关键,表示断言. 在Java中,同样也有assert关键字,表示断言,用法和含义都差不多.   二.语法   在J ...

  2. Python基本的语法知识

    1. 编程语言的介绍 低级语言:机器语言--------计算机内部只能接受二进制代码,故用0或者1表示的指令称为机器指令,全部的机器指令构成了计算机的机器语言. 汇编语言--------实质上跟机器语 ...

  3. 根据参数显示类别（三级联动，需要JSON数据）

    根据参数显示类别(三级联动,需要JSON数据) Scripts/Category.js 调用方法: $(function () { BindCategory(); //默认绑定文本框中的值 BindC ...

  4. 题解[51nod1555] 布丁怪

    题解[51nod1555] 布丁怪 题面 解析 本文参考这位dalao的题解 首先有一个巧妙的转换, 开一个数组记录每个横坐标的纵坐标, 简单来说就是对于点(x,y),令a[x]=y. 于是问题就变成 ...

  5. list获取所有上级

    /// <summary> /// 获取所有上级 /// </summary> /// <param name="list"></para ...

  6. (转)实验文档5：企业级kubernetes容器云自动化运维平台

    部署对象式存储minio 运维主机HDSS7-200.host.com上: 准备docker镜像 镜像下载地址 复制 12345678910111213141516 [root@hdss7-200 ~ ...

  7. mysql的存储引擎与锁

    一.背景知识 1.锁是计算机协调多个进程或线程并发访问某一资源的机制. A.锁分类. | 共享锁(读锁):在锁定期间,多个用户可以读取同一个资源,读取过程中数据不会发生变化. | 排他锁(写锁):在锁 ...

  8. 如何用Xshell导出文件到桌面本地

    在软件开发中,会经常用到登录到Linux服务器,查看相关日志,同时也会远程取出文件到本地环境, 在没有xftp客户端的情况下,如何直接使用xshell软件直接下载文件到本地呢 下载文件: 使用sz命令 ...

  9. OpenJudge 1.5.36:计算多项式的值

    描述 假定多项式的形式为xn+xn-1+…+x2+x+1,请计算给定单精度浮点数x和正整数n值的情况下这个多项式的值. 输入输入仅一行,包括x和n,用单个空格隔开.x在float范围内,n <= ...

  10. CSS子选择器与后代选择器的区别

    p > span{ color:blue; } <p> 嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙 ...