完整的Ajax实例

最新推荐文章于 2023-04-12 23:37:53 发布
最新推荐文章于 2023-04-12 23:37:53 发布
阅读量402 收藏
点赞数
分类专栏： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanliuxinming/article/details/32331651
版权

写在前面的话:

用了很久的Asp.Net Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了.

以前记的也不怎么清楚,这次就重新完整的学习一遍吧,也为了自己以后能找个完整的地方来复习.

什么是Ajax

Ajax的全称是Asynchronous Javascript And XML.AJax由HTML,Javascript,DHTML和DOM组成.

HTML用于建立Web表单

Javascript代码用于运行Ajax应用程序的核心代码,用于和服务器引用程序进行通信

DHTML用于动态更新表单

DOM用于处理HTML结构和服务器返回的XML

时至今日,Js中可以处理的数据包括了字符串,JSON,XML数据.

优点

通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验. 

实例

get.htm页面HTML代码如下:

<body>
    <label for="txt_username">
        姓名:</label>
    <input type="text" id="txt_username" />
    <br />
    <label for="txt_age">
        年龄:</label>
    <input type="text" id="txt_age" />
    <br />
    <input type="button" value="GET" id="btn" onclick="btn_click();" />
    <div id="result">
    </div>
</body>

js代码如下:

<script type="text/javascript">
    function btn_click() {
        //创建XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();

        //获取值
        var username = document.getElementById("txt_username").value;
        var age = document.getElementById("txt_age").value;

        //配置XMLHttpRequest对象
        xmlHttp.open("get", "Get.aspx?username=" + username
            + "&age=" + age);

        //设置回调函数
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById("result").innerHTML = xmlHttp.responseText;
            }
        }

        //发送请求
        xmlHttp.send(null);
    }
</script>

新建Get.aspx页,Get.aspx.cs代码如下:

protected void Page_Load(object sender, EventArgs e)
{
    Response.Clear();

    string username = Request.QueryString["username"];

    string age = Request.QueryString["age"];

    Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");

    Response.End();
}

结果:

输入姓名和年龄,点击Get按钮,就会从服务器获取到数据.

image

小结:

今天暂时写一个完整的例子来显示Ajax的调用过程,此例中存在许多问题:

  1. 如何创建在大部分浏览器中都能运行的XMLHttpRequest对象.
  2. 使用get请求时存在缓存问题
  3. 中文乱码问题

针对这些已经出现的问题,我们在随后的例子中会一一解决.

对于其他的疑问,比方说:

  1. 如何使用post传递数据
  2. post和get有什么区别
  3. 如何使用传输和使用json数据
  4. 如何传输和使用xml数据(毕竟,Ajax最后的一个字母x指的是XML)

对于这些疑问,我们在随后的文章里也会一一解决的.

北京龙爷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax技术 实例篇
weixin_47044904的博客
06-09 1122
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
ajax示例
while(life)++；
03-03 690
目录1、ajax以form形式发送数据1.1 ajax代码1.2 后端代码2、ajax以JSON形式发送数据2.1 ajax代码2.2 后端代码3、ajax以form形式发送list数据3.1 ajax代码3.2 后端代码 1、ajax以form形式发送数据 1.1 ajax代码 这里的contentType值是application/x-www-form-urlencoded，是默认的，不写也...
AJAX案例操作
qq_66429904的博客
12-09 724
ajax
ajax 的入门案例
qq_52370789的博客
04-12 706
ajax，Asynchronous JavaScript And XML，异步的JavaScript和XML同步：伴随着页面的刷新或跳转，即全局刷新；同步请求会阻塞代码的执行，即同步请求会一个一个的执行异步：在不刷新页面的情况下与服务器进行交互，即局部刷新；异步请求不会阻塞代码的执行，ajax请求一旦发送，不会等服务器响应结果完毕，后面的代码就会继续执行ajax的核心对象XMLHttpRequest。
ajax标准完整写法
坚持去坚持。
11-07 9684
ajax 标准写法 $.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json async:true,//请求是否异步，默认为异步，这也是ajax重要特性 data:{"id":"value"}, //参数值 type:"GET", ...
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
Ajax分页完整实例分析
10-05
Ajax分页完整实例分析
ajax实例入门代码
10-30
想学习ajax的朋友，如果刚开始接触可以查看脚本之家的ajax栏目，之前的一些文章。
AJAX 实例
12-13
AJAX 实例 为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序: 实例 使用 AJAX 修改该文本内容 修改内容 AJAX 实例解析 上面的 AJAX 应用程序包含一个 div 和一个按钮。 div 部分用于显示来自...
基于JQuery框架的AJAX实例代码
10-29
**基于JQuery框架的AJAX实例详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容，极大地提升了用户体验。而JQuery是一个强大的...
ajax示例代码
09-04
ajax基础示例，后台是Java ,前面是最基础的AJAX示例。
Ajax长连接项目案例
01-19
所谓的长连接，就是不断去发送请求，把请求阻塞在服务器端，每次超过请求时间就去重新发送请求，保持连接，随时获取服务器端的响应的数据 项目案例： 代码如下: function connection(){ $.ajax({ type:”GET”, url:”/api2/session/event?”, data:{ “uid”:obj.uid, “sessionID”:”cool” }, success:function(serverData){ connection(); }, error:function(XMLHttpRequest, textStatus, errorThrown){ co
Ajax编程技术与实例
08-10
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经典实例+代码大全
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
[jQuery]$.ajax()方法详解及实例
热门推荐
谦虚使人发胖的博客
09-21 2万+
$.ajax()方法详解及实例  1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.aja
ajax使用示例
一行一步的博客
08-16 4677
$.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异步请求及案例
qq_15994257的博客
08-27 2839
ajax异步请求及案例 1、ajax的介绍 前端页面想和后端页面进行数据交互就可以使用ajax。 让 javascript 发送异步的 http 请求，与后台服务器通信进行数据的获取，实现局部刷新。 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。 2、ajax的使用 jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。 使用前, 先在 https://www.apishop.net/ 注册账号, 在控制台获得
Ajax
weixin_30429201的博客
03-09 117
什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 ...
ajax实例html
最新发布
03-13
下面是一个简单的Ajax实例的HTML代码： ```html <!DOCTYPE html> <title>Ajax Example <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> function getData() { axios.get('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值