Ajax笔记整理_ajax重点笔记_ygpGoogle的博客-程序员秘密

什么是Ajax?

在这里插入图片描述

这么说起来可能不直观，下面举个例子：

就拿京东这个首页来说，我们把鼠标移动到左边手机/运营商/数码这个菜单时，会自动弹出来更细的一些分类，这些分类的名字都是存在数据库的，并不是写死在前端的，而是从数据库动态获取的，也就是是说我鼠标移到这个父菜单后，会给后台发一个请求，去获取数据库里的数据，然后再传到前端页面显示，倘若我不用Ajax，每一次请求都会重新刷新整个页面，用户体验极差，用了Ajax则只需局部刷新，也称异步加载！！

Ajax基本原理

在这里插入图片描述
请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，而是流转给发请求的ajax引擎对象。这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。js的DOM操作中的数据由程序员自己写死声明，变成从服务器动态的获取。

创建ajax程序的基本流程

1 创建ajax引擎对象

 var ajax;
  if(window.XMLHttpRequest){
    
 ajax=new XMLHttpRequest//火狐 谷歌 
 }else if(window.ActiveXObject){
     
 ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie 
 }

2 声明ajax监听函数
在这里插入图片描述

ajax.onreadystatechange=function(){
     
//判断数据状态码 
if(ajax.readyState==4){
    
//4 表示响应数据成功接收 
//判断响应状态码 
if(ajax.status==200){
     //获取响应数据 //普通文本 //json格式数据 
var data=ajax.responseText; //xml数据 
//var doc=ajax.responseXML; 
var data=ajax.responseText; //处理响应数据(js的DOM操作) 
var showdiv=document.getElementById("showdiv"); showdiv.innerHTML=data; 
}else if(ajax.status==404){
     
var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="请求资源未找到"; 
}else if(ajax.status==500){
     
var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="服务器繁忙"; } 
}}

3 创建并发送请求

ajax.open(method,url,async) 
ajax.send("请求数据") 
解释: method：表示请求的方式，值为get/post 
url:表示请求地址，一般为要请求的servlet的别名。 
async:表示异步还是同步请求，true表示异步，false表示同步， 默认为异步。 
注意： 如果请求方式是get方式，则请求数据需要拼接在url的后面， 以？隔开，键值对。并且send中要写null 如果是post请求方式，则在send方法中书写请求数据即可。并 且要声明数据的提交格式为键值对。 
示例： //使用get方式 
ajax.open("get","user?uname="+uname,true); ajax.send(null); 
//post方式 
ajax.open("post","user", true); 
//设置请求数据的格式 
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded "); 
ajax.send("un="+uname);

4 ajax的响应数据格式

普通文本：后台在接收到ajax请求后，处理后直接响应普通字符串给ajax。
josn数据：后台在接收到ajax请求后，处理后响应json格式的字符串给ajax。
ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。
json格式：var 对象名={ 键名:值, 键名:值, … }

jquery中的ajax：

使用方式：
get方式 $. g e t (u r l, d a t a, f n) p o s t 方式$ .post(url,data,fn)
通用方式 $ajax({ type:"get", url:"data", success:function(data){ alert(data); } }) 注意：$ .get和$.post方式中的data为json格式的请求数据，以上三种方式，请求成功后的回调函数中的形参表示响应的数据。

原生Ajax示例代码

<%@ 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>
<!-- 
	Ajax请求学习

 -->
<!-- 声明js代码域 -->
<script type="text/javascript">
	function ajaxReq(){
    
		//获取用户请求数据
		var uname=document.getElementById("uname").value;
		var data="name="+uname;
		//创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){
    
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){
    
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		//复写onreadystatechange函数
		ajax.onreadystatechange=function(){
    
			//判断ajax状态码
			if(ajax.readyState==4){
    
				//判断响应状态码
				if(ajax.status==200){
    
					//获取响应内容
					var result=ajax.responseText;
					//处理响应内容
					alert(result);
				}	
			}	
		}
		//发送请求
			//get方式:请求实体拼接在URL后面
				/* ajax.open("get","ajax?"+data);
				ajax.send(null); */
			//post方式：请求实体需要单独的发送
				ajax.open("post", "ajax");
				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				ajax.send("name=张三&pwd=123");
	}
</script>
<style type="text/css">
	#showdiv{
    
		border:solid 1px;
		width:200px;
		height:100px; 
	}
</style>
</head>
<body>
	<form action="" enctype="application/x-www-form-urlencoded"></form>
	<h3>欢迎登录403峡谷</h3>
	<hr>
	<input type="text" name="uname" id="uname"  value=""/>
	<input type="button" value="测试 " onclick="ajaxReq()"/>
	<div id="showdiv"></div>
</body>
</html>

<%@ 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代码域 -->
<!-- 
	Ajax学习：
		1、ajax的概念
			局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
		2、ajax的作用
			实现在当前结果页中显示其他请求的响应内容
		3、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代表同步
 -->
<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>欢迎登录403峡谷</h3>
	<hr>
	<input type="button" value="测试 " onclick="getData()"/>
	<div id="showdiv"></div>
</body>
</html>

Jquery版Ajax

get方式：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

$(document).ready(function(){
    
	$("button").click(function(){
    
		$.get("/try/ajax/demo_test.php",function(data,status){
    
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});

$.get() 的第一个参数是我们希望请求URL（“demo_test.php”）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态，data是从后台实时相应过来的数据，status是状态码。
post方式： $.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
    
    $.post("/try/ajax/demo_test_post.php",
    {
    
        name:"菜鸟教程",
        url:"http://www.baidu.com"
    },
    function(data,status){
    
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。
然后我们连同请求（name 和 url）一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

post和get的区别

GET 和 POST 方法的区别：
1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

本文链接：https://blog.csdn.net/ygp12345/article/details/107125497

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

原码、反码、补码知识详细讲解_负123的原码反码补码_视嵌的博客-程序员秘密

本篇文章讲解了计算机的原码, 反码和补码. 并且进行了深入探求了为何要使用反码和补码, 以及更进一步的论证了为何可以用反码, 补码的加法计算原码的减法. 论证部分如有不对的地方请各位牛人帮忙指正! 希望本文对大家学习计算机基础有所帮助!一. 机器数和真值在学习原码, 反码和补码之前, 需要先了解机器数和真值的概念.1、机器数一个数在计算机中的二进制表示形式, 叫做这个数的机...

cmake 编译Release版本_cmake release_kaerwar的博客-程序员秘密

# cmake 编译windows release 版本在win上编译程序使用cmake --build . --config Release可以指向release版本，否则默认debug输出在linux上cmake 生成cache后重新setcmake .. -DCMAKE_BUILD_TYPE=Release make...

各种Windows 操作系统中的 .NET Framework 支持_weixin_34221332的博客-程序员秘密

Windows 操作系统中的 .NET Framework 支持Hans VerbeeckMicrosoft EMEA2002 年 9 月适用于： Microsoft .NET Framework Microsoft Windows 操作系统摘要：本文提供了有关能够安装 Microsoft .NET Framework 的 Mi...

【fiddler小知识】fiddler抓不到pycharm发送的请求解决办法_fiddler 抓不到pycharm_yunlive的博客-程序员秘密

很多人会遇到fiddler抓取不到python发送的请求。我也遇到了，通过pychrarm发送的请求，fiddler没有抓到。一般常见解决办法：方法1：卸载fiddler，重新安装就可以了。（亲测有效，推荐此法）方法2：fiddler关闭，重启路由器方法3：不要用虚拟环境...

matlab怎么从fig恢复原数据,从Matlab .fig文件中读取数据，并重新绘图_春光古大侠的博客-程序员秘密

Matlab提供了强大的函数集合，可以从.fig文件中读取图中的数据，并重新绘制图形。如果原始数据丢失，我们可以从.fig文件中恢复原始数据，并基于原始数据做进一步的处理。以下是一个从两个不同文件中读取原始数据，并重新绘制图形的例子。h1 = openfig('1.fig','reuse'); % open figureD1=get(gca,'Children'); %get the handle...

什么软件可以测试吃鸡帧数,gtx750ti吃鸡多少fps，实际测试一下_还没长大的成年人的博客-程序员秘密

先来看一下我电脑的参数，处理器i5-6500，这个处理器是不会拖后腿的。16Gddr4内存，我插了4根4g的，先给大家测试16g玩的怎么样，再测试8g的情况。显卡是华硕的750ti，体质不错。固态是东芝q300。显示器为27寸的1080p的显示器。话不多说，直接进入吃鸡，画质设置为(低)，其实下边还有非常低。再低画质下，效果如何呢。先来看跳伞界面吧，跳伞界面非常不如意啊，fps甚至一直维持在25左...

随便推点

技术选型及Spring Cloud介绍_shenzhen_zsw的博客-程序员秘密

目录技术选型及Spring Cloud介绍目标技术选型的三要素微服务技术选型SpringCloud介绍SpringCloud的引入技术选型及Spring Cloud介绍目标 1）微服务的技术选型； 2）搭建开发具备服务注册发现、客户端负载均衡、服务间通信的微服务架构； 3）使用SpringCloud Eureka、Sp...

IP 分段子网掩码_加长子网掩码_lizz2276的博客-程序员秘密

子网掩码分网段例如 200台机器分成4个子网 [ip 段 ]　　200台机器，4个子网，那么就是每个子网50台机器，设定为192.168.10.0，C类的IP，大子网掩码应为255.255.255.0，但是我们要分子网，所以按照上面的，我们用32个IP一个子网内不够，应该每个子网用64个IP(其中62位可用，足够了吧)，然后用我的办法:子网掩码应该是256-64=192，那么总的子网掩码应该为:255.255.255.192。不相信?算算:0-63，64-127，128-191，192-255，..