AJAX学习

最新推荐文章于 2024-08-31 15:57:06 发布

进击的小池

最新推荐文章于 2024-08-31 15:57:06 发布

阅读量183

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/m0_37546552/article/details/89304305

版权

AJAX学习

AJAX
AJAX 实例解释
创建XMLHttpRequest对象
向服务器发送请求
open() 方法的 url 参数是服务器上文件的地址：
AJAX完整代码实例：
使用 Callback 函数
- CallBack完整代码实例：
AJAX高级：

AJAX

ajax(用于创建快速动态网页的技术) = 异步 JavaScript 和 XML。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。(地址不会改变)
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX 实例解释

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<html>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

接下来，在页面的 head 部分添加一个

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

创建XMLHttpRequest对象

//创建 XMLHttpRequest 对象
//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

向服务器发送请求

//将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：xmlhttp.open(“GET”,“cws.jsp”,true);//true=异步，false=同步
xmlhttp.send();
注意
GET 还是 POST？
POST：向指定的资源提交要被处理的数据
GET: 从指定的资源请求数据。
在这里插入图片描述
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

如果得到的为缓存结果，为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open(“GET”,“ajax_test.asp”,true);
注意：
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xmlhttp.open(“GET”,“test1.txt”,false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

AJAX完整代码实例：

<script type="text/javascript">
	function loadXMLDoc()
	{
var xmlhttp;
		//创建 XMLHttpRequest 对象
		//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
		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("myDiv").innerHTML=xmlhttp.responseText;
    			      }
          }
	    //将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
	    xmlhttp.open("GET","cws.jsp",true);//true=异步，false=同步
		xmlhttp.send();
	}
</script>
  </head>
  
  <body>
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
	<button type="button" onclick=" loadXMLDoc()">通过 AJAX 改变内容</button>
  </body>

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

CallBack完整代码实例：

<script type="text/javascript">
	var xmlhttp;
	function loadXMLDoc(url,cfunc)
	{
		//创建 XMLHttpRequest 对象
		//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
		if (window.XMLHttpRequest)
 		 {// code for IE7+, Firefox, Chrome, Opera, Safari
 				 xmlhttp=new XMLHttpRequest();
 		 }
		else
 		 {// code for IE6, IE5
 				 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		// onreadystatechange事件
	    xmlhttp.onreadystatechange=cfunc;
	    //将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
	    xmlhttp.open("GET",url,true);//true=异步，false=同步
		xmlhttp.send();
	}
//callback函数
	function myFunction()
	{
		loadXMLDoc("cws.jsp",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>

AJAX高级：

当用户在上面的输入框中键入字符时，会执行函数 “showHint()” 。该函数由 “onkeyup” 事件触发：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript">
	var xmlhttp;
	function loadXMLDoc(url,cfunc)
	{
		//创建 XMLHttpRequest 对象
		//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
		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;
	    //将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
	    xmlhttp.open("GET",url,true);//true=异步，false=同步
		xmlhttp.send();
	}
	//callback函数
	function myFunction(str)
	{
		//空的话返回空
		if (str.length==0)
 		 {
 			 document.getElementById("myDiv").innerHTML="";
			  return;
 		 }
		loadXMLDoc("category/show?id="+str,function()
   		 {
   					 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 					   {
   									 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    					}
 		 });
	}
</script>
  </head>
  
  <body>
	<h3>请在下面的输入框中键入id：</h3>
	<form action=""> 
		ID：<input type="text" id="txt1" onkeyup="myFunction(this.value)" />
	</form>
	<p>姓名：<span id="myDiv"></span></p> 
  </body>
</html>

源代码解释：
如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
• 创建 XMLHttpRequest 对象
• 当服务器响应就绪时执行函数
• 把请求发送到服务器上的文件
• 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

进击的小池

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
AJAX学习

AJAX学习AJAXAJAX 实例解释创建XMLHttpRequest对象向服务器发送请求open() 方法的 url 参数是服务器上文件的地址：AJAX完整代码实例：使用 Callback 函数CallBack完整代码实例：AJAX高级：AJAXajax(用于创建快速动态网页的技术) = 异步 JavaScript 和 XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异...
复制链接

扫一扫