Ajax学习

最新推荐文章于 2024-11-03 23:16:52 发布

原创最新推荐文章于 2024-11-03 23:16:52 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax，js

Ajax学习专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Ajax（异步JavaScript和XML）技术，包括其定义、工作原理、为何需要它，以及如何在网页开发中使用Ajax进行异步数据查询和交互。同时，提供了基本的Ajax使用流程和示例代码。

Ajax学习

1.什么是Ajax

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。不是一种新技术，是如下几种技术的组合应用：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

总结：Ajax是异步刷新技术，用来在当前页面内响应不同的请求内容（用来在当前页面响应下一次的请求结果）

Ajax本质上是一个浏览器端的技术。

为什么需要Ajax

需求：有时候我们需要将本次的相应结果和前面的响应结果内容在同一个页面中展现给用户
解决：1.在后台服务器端将多次响应内容重新拼接成一个新的jsp，响应，但是这样会造成很多的响应内容被重复响应，造成资源浪费
2.使用Ajax

使用Ajax

ajax的基本使用流程
//创建ajax引擎对象
//复写onreadystatement函数
//判断ajax状态码
//判断响应状态码
//获取响应内容(响应内容的格式)
//普通字符串：responseText
//json(重点)：responseText
其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法
将接受的字符串数据直接转换为js的对象

								json格式：
									var 对象名={
											属性名:属性值,
											属性名:属性值,
											……
										}
								
							//XML数据：responseXML.返回document对象
								通过document对象将数据从xml中获取出来
						//处理响应内容(js操作文档结构)
			//发送请求
				//get请求
					get的请求实体拼接在URL后面，？隔开，键值对
					ajax.open("get","url");
					ajax.send(null);
				//post请求
					有单独的请求实体
					ajax.open("post", "url");
					ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					ajax.send("name=张三&pwd=123");
		ajax的状态码
			ajax状态码:
				readyState：0,1,2,3,4
					4: 表示响应内容被成功接收
			响应状态码:
				status
				200:表示一切OK
				404:资源未找到
				500：内部服务器错误
		ajax的异步和同步
			ajax.open(method,urL,async)
			async：设置同步代码执行还是异步代码执行
				  true代表异步，默认是异步
				  false代表同步

示例代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 声明js代码域 -->
<script type="text/javascript">
	function getData(){		
		//创建ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){//火狐
				ajax=new XMLHttpRequest();
			}else if(window.ActiveXObject){//ie
				ajax=new ActiveXObject("Msxml2.XMLHTTP");
			}
		
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
				//判断Ajax状态吗
				if(ajax.readyState==4){
					//判断响应状态吗
					if(ajax.status==200){
						//获取响应内容
						var result=ajax.responseText;
						//处理响应内容
							//获取元素对象
							var showdiv=document.getElementById("showdiv");
							showdiv.innerHTML=result;
					}else if(ajax.status==404){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="请求资源不存在";
					}else if(ajax.status==500){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="服务器繁忙";
					}
				}else{
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
				}
			}
		//发送请求
		ajax.open("get","ajax",true);
		ajax.send(null);
		alert("哈哈");
	}
</script>
<style type="text/css">
	#showdiv{
		border:solid 1px;
		width:200px;
		height:100px; 
	}
</style>
</head>
<body>
	<h3>Ajax学习</h3>
	<hr>
	<input type="button" value="测试 " onclick="getData()"/>
	<div id="showdiv"></div>
</body>
</html>