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

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

智能推荐

Linux创建文件的默认权限设定_设置文件创建的权限为0_小迷糊的守护神的博客-程序员秘密

Linux创建文件的默认权限设定1.查看默认权限：umask一般的默认返回值是：0022・第一位0：文件特殊权限・022：文件默认权限2.文件的默认权限・默认权限不能创建可执行权限的文件・默认权限的最大设定是666・默认权限需要换算成字母再相减・建立文件之后的默认权限，为666减去umask值3.demo・最大权限(666 ----> -rw-rw-rw-)减掉默认值(...

LayuiMini后台登录_layui mini 登录_猫程序源码的博客-程序员秘密

模板名称：LayuiMini后台登录模板介绍:一款基于Layui制作轻量级的后台登录界面，全屏粒子线条带验证码登录框表单验证功能页面模板。查看演示:https://192x.com/demo?id=49下载地址:https://192x.com/49.html模板图片:...

iOS9 广告拦截 CONTENT BLOCKER_lyq07的博客-程序员秘密

在iOS9系统中的Safari中，用户可以通过安装和开启支持内容拦截插件的app，对Safari中的广告、cookies追踪、banner、分享widget等内容进行拦截。

Python3爬取人人网（校内网）个人照片及朋友照片，并一键下载到本地~~~附源代码..._diao49908的博客-程序员秘密

题记：11月14日早晨8点，人人网发布公告，宣布人人公司将人人网社交平台业务相关资产以2000万美元的现金加4000万美元的股票对价出售予北京多牛传媒，自此，人人公司将专注于境内的二手车业务和在美国的投资业务。人人网CEO陈一舟说：“很高兴为人人网找到一个新的归宿和起点。”然而对于人人网曾经近2亿的注册用户来说，哪有什么新的开始，故事已经到了尽头。彼时，他们还是刚...

Latex 中 Table中不显示 footnote, 表格强制分行, 解决方法_footnote 在framed没有显示_dannyPolyu的博客-程序员秘密

Sometimes it is a real pain to use the latex. For example, the footnote in table cannot be displayed normally.Need to add following lines in the header.\usepackage{footnote}\makesavenotee

linux下的chmod,chown和chgrp_南京_杨文的博客-程序员秘密

对于linux的权限掌握以下几个命令就可以非常熟练的操作系统中的各种权限了。使用权限 : 所有使用者使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案存取权限分为三级 : 档案拥有