Ajax笔记整理

什么是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 方 式 .get(url,data,fn) post方式 .get(url,data,fn)post.post(url,data,fn)
通用方式 . a j a x ( t y p e : " g e t " , u r l : " d a t a " , s u c c e s s : f u n c t i o n ( d a t a ) a l e r t ( d a t a ) ; ) 注 意 : .ajax({ type:"get", url:"data", success:function(data){ alert(data); } }) 注意: .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 方法主要用于更新数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值