AJAX的简单例子

最新推荐文章于 2022-12-09 17:05:52 发布
最新推荐文章于 2022-12-09 17:05:52 发布
阅读量2k 收藏
点赞数
分类专栏： AJAX 文章标签： ajax xmlhttprequest function javascript 服务器 file


这个是用于显示主体的ajax.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
" http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX网页开发实例</title>

<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>

</head>
<body>
<h1>AJAX网页开发实例</h1>
<p>看看下面的例子，你也许就会懂得数据是怎么样完成无刷新的了。</p>
<p id="xmlObj" style="border:1px dashed #ccc;padding:10px;">
这是一些简单的数据。<a href="data.xml" title="调取XML数据。 " οnclick="ajaxRead('data.xml'); this.style.display='none'; return false">调取XML数据。 </a>
</p>
<p><a href=" http://www.b3inside.com">返回Blog</a></p>
</body>
</html>

下面是包含数据的data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
这里是XML中的数据。
</data>
</root>

注意我们现在连接data.xml并没有使用javascript,要使用javascript，执行ajaxRead函数，连接是隐藏的，并且此连接并没有重定向到data.xml文件。函数ajaxRead还没有定义，所以当你测试时，会得到一个JS错误。所以我们在开始的<head>中定义了函数：
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>

解释下，函数ajaxRead将在点击View XML data连接的时候执行，在函数里，我们定义了一个xmlObj的变量，它就负责客户端和服务器端中转。我们定义一个if/else循环块：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}

这只是测试不同对象的可用性——不同的浏览器执行XMLHttpRequest对象的时候不同，所以我们定义“xmlObj”作为XMLHttpRequest对象的时候，我们必须区别对待。如果没有XMLHttpRequest可用，函数以return结束来取消错误报告。大部分时候，XMLHttpRequest都是可用的，不过排除一些太老的浏览器。

下面的部分：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}

每当XMLHttpRequest状态改变时，onreadystatechange事件就触发，此事件共有5个状态，从0到4。
[0]uninitialized未初始化(在XMLHttpRequest开始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest从服务器端获得响应)
[3]interactive(当对象连接到服务器)
[4]complete(完成)
状态5[编号是4]是用来确认数据是否可用的，正好用来给xmlObj.readyState用，如果“是”，我们执行updateObj函数，此函数有2个参数：ID以及填充的数据，它的方法以后说明。
liusylon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax技术 实例篇
weixin_47044904的博客
06-09 1116
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
ajax使用示例
一行一步的博客
08-16 4676
$.ajax({ async:true, type: ‘get’, url:“demo_test.txt”, contentType:‘application/x-www-form-urlencoded’, data:{ name : ‘name’,password:‘password’}, dataType:‘application/x-www-form-urlencoded’, succes...
ajax原理和实现步骤
weixin_54242901的博客
09-01 1348
一、Ajax是什么? Ajax = 异步 JavaScript 和 XML 或者是 HTML Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页更新部分网页的技术。 Ajax使用的场景：网页的消息角标变化、搜索引擎的输入提示、注册时输入格式错误提示 （注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。） 二，Ajax 的实现步骤 1.创建ajax对象 var xhr = new XMLHttp
AJAX案例操作
qq_66429904的博客
12-09 722
ajax
[jQuery]$.ajax()方法详解及实例
谦虚使人发胖的博客
09-21 2万+
$.ajax()方法详解及实例  1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.aja
学习Ajax的一个小例子
03-22
NULL 博文链接：https://wankunde.iteye.com/blog/929965
php的ajax简单实例
10-26
本篇文章主要是对php的ajax简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
Ajax简单实例
08-20
Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行...通过学习这个实例，你可以更好地理解Ajax的工作原理以及如何在实际项目中应用它。
Ajax简单实例 XMLHttpRequest
01-30
本实例将通过XMLHttpRequest对象来展示Ajax的基础用法，非常适合初学者学习。 首先，要理解XMLHttpRequest对象是Ajax的核心，它负责在后台与服务器进行通信。在JavaScript中，我们可以通过以下方式创建一个...
ajax例子ajax例子
05-18
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
ajax使用实例
03-17
对于初学者而言学ajax是不错的资源
Ajax 经典案例开发大全
09-18
经典案例，带数据库脚本、Java源文件和页面源文件。有演示效果，也可以自己部署看效果。以下是案例的目录。 1-1.EXE 动态加载的FAQ实例演示 1-2.EXE 根据邮政编码获取地区信息实例演示 1-3.EXE 动态树形列表实例演示 1-4.EXE 多级联动菜单实例演示 1-5.EXE 条件设置向导实例演示 1-6.EXE 页面关键词提示实例演示 2-1.EXE 无刷新显示回帖实例演示 2-2.EXE 输入内容前提示实例演示 2-3.EXE 带进度的文件上传实例演示 2-4.EXE 大量数据动态浏览查询实例演示 2-5.EXE 信息排序实例演示 2-6.EXE 切换标签页实例演示 3-1.EXE 注册表单验证实例演示 3-2.EXE 购物车实例演示 3-3.EXE 产品快速检索实例演示 3-4.EXE 系列产品特性速查实例演示 3-5.EXE 邮件订阅实例演示 3-6.EXE 产品评级实例演示 4-1.EXE 简单计算器实例演示 4-2.EXE 文章拼写检查实例演示 4-3.EXE 拼词游戏实例演示 4-4.EXE 在线词典实例演示 4-5.EXE 远程网页源代码读取实例演示 5-1.EXE 相册浏览实例演示 5-2.EXE 幻灯片实例演示 5-3.EXE 灯箱效果实例演示 5-4.EXE 聊天室实例演示 6-1.EXE 自动登录实例演示 6-2.EXE 自动保存草稿实例演示 6-3.EXE 实时更新的股价实例演示 6-4.EXE 提前加载分页文章实例演示 7-1.EXE 获取服务器当前时间实例演示 7-2.EXE 远程PING服务器实例演示 7-3.EXE 服务器监测系统实例演示 7-4.EXE 使用滑动栏设置参数实例演示 8-1.EXE RSS阅读器实例演示 8-2.EXE 天气情况查询实例演示 8-3.EXE 访问搜索服务实例演示 8-4.EXE 读取Amazon产品目录实例演示 9-1.EXE 名片册实例演示 9-2.EXE 自定义个人门户实例演示 9-3.EXE 个人任务管理实例演示 9-4.EXE 许愿墙实例演示 9-5.EXE 日程表实例演示 9-6.EXE 考试系统实例演示
Ajax小例子
04-06
NULL 博文链接：https://wyh081113-163-com.iteye.com/blog/1545928
ajax经典实例+代码大全
09-11
ajax经典实例+代码大全 绝对经典 -------- 目录说明 -------- database 目录存放数据库SQL文件 java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 -------------- 数据库安装说明 -------------- 了解MySQL的用户可以直接使用自己熟悉的方式创建名为ajax的数据库，并将ajax.sql文件导入即可。 下面是简要操作方法： 1. 实例数据库在MySQL 5.0.27 版本下测试通过 2. 将database目录中ajax.sql文件复制到C:\ 3. 进入MySQL安装目录中的bin目录 4. 输入 mysql -u root -p ，然后输入密码登录本地MySQL服务器 5. 输入 CREATE DATABASE ajax DEFAULT CHARACTER SET utf8; 创建名为ajax的数据库 6. 输入 use ajax 7. 输入 source c:\ajax.sql 执行数据库初始化语句 ------------------ Java源文件使用说明 ------------------ 实例中大部分文件为HTML及JSP文件，部分Java源文件存放在java目录中。 可将目录中的内容作为Eclipse的一个项目导入Eclipse中使用。 ----------- WEB发布方法 ----------- 所有实例在jdk 1.4.2 + Tomcat 5.0.28 环境下测试通过。 将webapp目录中的内容复制到Tomcat的webapps目录中作为一个web应用发布即可。 启动Tomcat前注意修改 ajax/WEB-INF/classes/ajax_db.properties 文件。 将其中的URL、USER和PASSWORD属性根据实际情况进行修改。 Tomcat正常启动后使用 http://localhost:8080/ajax 进行访问 +=========================================================================================== 最后注释： 可能还有一点，就是把你的ajax密码定位好 路径是：${ajax}\ajax\WEB-INF\classes\ajax_db.properties，用记事本打开。那个${ajax}就是你当前存放ajax这个文件夹的路 径 DRIVERS=com.mysql.jdbc.Driver URL=jdbc:mysql://localhost/ajax?useUnicode=true&characterEncoding=utf8 USER=root PASSWORD=ajax 里面的代码是这样写的，把最后一行的那个对应的密码改为你自己数据库的代码就OK
ajax的一个简单例子
04-25
ajax的一个简单例子,这是一个小例子,可以仅供参考
ajax使用例子
渔闻520的博客
09-16 525
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHt...
JQuery中Ajax的操作完整例子
热门推荐
小小小的博客
01-20 9万+
Java软件开发中，后台中我们可以通过各种框架，像SSH等进行对代码的封装，方便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进行封装控制，使我们只需要进行一些简单配置就可以实现；而spring进行了对各种对象的管理进行封装，提供了AOP编程的方式，大大方便了我们；而hibernate和IBatis则是对JDBC代码进行封装，不需要我们每次都写那些重复
Ajax工作原理，Eclipse，Java实现样例代码
诗和远方，任重道远
03-19 3484
Ajax工作机制 1. 认识Ajax Ajax是Asynchronous JavaScript and XML的简称，即异步的 JavaScript 和 XML。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 2. Ajax原理 3...
Ajax的一个简单例子
最新发布
07-12
当然，我可以给你一个简单的 Ajax 示例。假设你有一个 HTML 页面，上面有一个按钮和一个用于显示结果的 `<div>` 元素。当点击按钮时，我们将通过 Ajax 请求获取一些数据并将其显示在 `<div>` 中。 首先，确保你在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值