Ajax异步刷新

最新推荐文章于 2023-02-01 22:08:44 发布
最新推荐文章于 2023-02-01 22:08:44 发布
阅读量85 收藏
点赞数
分类专栏： Ajax/XML/JSON/XSL 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mohaiyong/article/details/84423364
版权
[size=x-large][color=orange][b]Ajax异步刷新[/b][/color][/size]

[color=red][b]一、Ajax获得String类型数据：[/b][/color] 

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","/ajax/test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>


[color=red][b]二、Ajax获得XML类型数据[/b][/color] 

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>

</body>
</html>

[color=red][b]
三、Ajax返回状态[/b][/color] 

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html>


[color=red][b]四、Demo:[/b][/color]

1.验证用户输入文本： 

<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action=""> 
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p> 

</body>
</html>



2.下拉列表框： 

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action="" style="margin-top:15px;"> 
<label>请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>

</body>
</html>



3.获取xml: 

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</div>
</body>
</html>


xml文件： 
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
</CATALOG>



4.附加：文本输入 

<form> 
First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>


function showHint(str)
{

  if (str.length==0)
    { 
    document.getElementById("txtHint").innerHTML="";
    return;
    }

  xmlHttp=GetXmlHttpObject()

  if (xmlHttp==null)
    {
    alert ("您的浏览器不支持AJAX！");
    return;
    }

var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}


function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}


function stateChanged() 
{ 
  if (xmlHttp.readyState==4)
  { 
  document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  }
}



[url]http://www.w3school.com.cn/ajax/[/url]
mohaiyong
关注
专栏目录
AJAX异步刷新
05-21
网站刷新代码的完成，让你学习到AJAX的基本结构以及数据库的基本使用！该资源还带有注释，让你更清晰的了解每一句代码的含义
ajax异步刷新
mchgogo的博客
02-26 217
 $(function(){ setInterval(show5,1000); });  &lt;%-- "&lt;td&gt;"+'&lt;fmt:formatDate value="&lt;%=new java.util.Date()%&gt;" pattern="yyyy-MM-dd HH:mm:ss"/&gt;'+ --%&gt; function show5(
通过ajax实现异步刷新
vera_xue的专栏
04-29 737
pageEncoding="utf-8"%> http://www.w3.org/TR/html4/loose.dtd"> Insert title here var xmlHttp; var flag; //定义标志位 function showJSON(){   } function validate(uname){//定义函数 var url = "Ajax
asp.net jquery+ajax异步刷新实现示例
10-26
总结来说，这个示例展示了如何利用ASP.NET、jQuery和AJAX实现异步刷新。通过监听用户输入事件，使用AJAX发送请求，然后在服务器端处理请求，最后将处理结果返回并更新页面，这一切都在不刷新页面的前提下完成，提高...
SSH增删改查Ajax异步刷新
01-09
在“SSH增删改查Ajax异步刷新”中，Ajax技术被用来实现实时的数据显示。例如，当用户执行添加、删除或修改操作时，可以通过Ajax向服务器发送请求，服务器处理完操作后返回结果，前端再通过JavaScript更新DOM...
ajax实现异步刷新
10-12
ajax实现异步刷新，代码全，简单易懂，看了就会，非常实用
ajax详解
技术专栏
05-08 789
AJAX是Asynchronous JavaScript And XML的缩写。在2005年，Google通过其Google Suggest使AJAX变得流行起来。       AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。        XMLHttpRequest是AJ
使用Ajax实现页面表格添删改查的异步刷新操作
10-20
AJAX实现页面表格的添删改查操作，异步刷新，有温馨手册，直接部署到项目即可使用，数据库已备，非常方便的代码。
ajax 异步刷新表格
NYMMMmm的博客
04-20 1059
举个栗子：按姓名查询学生 页面部分： <input type="text" class="input" name="stu_name" id="searchname" placeholder="请输入要查询的学生姓名"> <div class="search"><a class="searchbyname" onclick="queryStuByName()">查询</a> <table id="table1">
什么是ajax异步刷新
Ideality_hunter的专栏
11-18 4288
知识笔记| AJAX—实现异步刷新
qq_43352105的博客
12-05 488
AJAX 全局刷新 局部刷新 Ajax介绍 这个一部对象上存在浏览器内部内存中的，使用js语法创建和使用该对象 异步–一次可以处理多个请求 Javascrip–javascrip的脚本，在浏览器中运行，创建异步对象发送请求更新页面的dom对象 xml–网络中传输的数据格式，使用json替换了xml的数据格式 XML 可扩展的标记语言， 被设计用来传输和存储数据，标签名字均为自定义，被JSON替代 缺点 没有后退可言，存在跨域问题(同源处理),SEO不友好（爬虫爬不动结果） HTTP协议
ajax 异步刷新实例
Small_dian的专栏
09-26 2239
1 在网上下载jquery.js 2 写第一个jsp页面 index.jsp <% System.out.println("进入调用页面"); %> JSP 'index.jsp' starting page 加入jquery.js文件，否则不能识别js中的那些格式 This is m
关于Ajax的异步刷新功能及简单案例（php）
Wellfancy的博客
11-08 2354
目录 GET请求 有关 GET 请求的其他一些注释： POST请求 有关 POST 请求的其他一些注释： 几个一会儿会用到的知识点： 1、xmlhttp.readyState==4 && xmlhttp.status==200 2、针对IE6及以下的版本浏览器的兼容处理 3、onblur事件 操作演示 HTML代码 php代码部分： 1、checkUsername部分： 2、checkEmail部分 3、checkPhone部分 这篇文章主要来介绍一...
ajax实现异步更新
像风走过八千里
01-06 4034
最近因为一些功能的实现，需要实现某个div内容随着事件的不同而进行变化，此时就用到了ajax中的异步更新了。 使用ajax异步更新的优点： （1）页面无刷新，实现按需加载，用户体验非常好 （2）不打断用户的操作，实现异步请求，具备更加迅速的响应能力 （3）可以将服务端的一些行为转嫁到客户端，减轻服务器压力和宽带 实现 HTML test.html &lt;div id="content"&gt;&...
（十）ajax异步刷新问题（input和button）
weixin_45304790的博客
10-02 519
背景 在学校安排的实习项目中，尽管我是走的后端方向，但是难免会碰到很多前端知识，且这也是我们后端需要掌握的一些，我想，有能力的话，尽量往全栈走，这样选择性会多点。好啦，言归正传。 我大致描述一下问题： 在设计一个表单的时候，里面还有多个发送验证码，上传附件等组合场景。我的设计是，只用一个form作为一个表单，在填写完所有信息后再统一提交保存到数据库，而发送验证码使用ajax异步实现。（这是课题老师要求的，我只好跟着做）。由于自己对前端知识的匮乏，所以才遇到了这个问题： 在点击发送手机验证码时候，我使用的是
Ajax 异步刷新技术
最新发布
weixin_65121344的博客
02-01 490
Ajax ： 即 异步JavaScript 和 XML ，Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而传统不使用Ajax的网页，如果需要更新内容，必需重载整个网页面。
利用jQuery与Struts2实现Ajax异步刷新的实战教程
本文将详细介绍如何使用jQuery和Struts框架进行异步刷新，特别是通过AJAX请求处理Struts Action。首先，我们了解到这是一篇实用教程，适合那些想要了解如何在JavaScript库jQuery与服务器端Java技术Struts之间实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值