Ajax 笔记

最新推荐文章于 2022-10-21 17:12:38 发布

AiT_Boy

最新推荐文章于 2022-10-21 17:12:38 发布

阅读量137

点赞数

分类专栏： Web

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.什么是Ajax ?

场景：打开百度页面，当你在搜索栏里面输入东西的时候，会出现下拉框，里面有很多与你搜索的东西相关的供你选择，如图

这些选项都是通过向服务器发送请求，服务器返回的数据，
传统上服务器响应客服端，会刷新当前页面，而一个下拉框小小的变动，却需要服务器将整个页面从新发送，这使得资源浪费，响应重复信息。
众所周知，js可以控制页面的元素，如下拉框信息，那么是否可以直接让js通过游览器向服务器发送信息，然后服务器直接将信息返还给js，然后js来动态改变页面部分内容。

所以简单来说Ajax可以说是通过js向服务器发送信息，动态改变页面部分内容的一门技术。

2，简单使用Ajax。

<一下为一.jsp文本内容>

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

-->

<script type="text/javascript">
     function getData(){
       //1,创建ajax引擎对象
           var ajax;

   / /2,获取ajax对象(window.XMLHttpRuquest)
           if(window.XMLHttpRequest){ // 支持火狐游览器
               ajax=new XMLHttpRequest();
           }else if(window.ActiveXObject){ // 支持 IE 游览器
               ajax=new ActiveXObject("Msxml2.XMLHTTP");
           }

           //3,复写onreadystatement函数
           ajax.onreadystatechange=function(){
               //判断Ajax状态吗
               if(ajax.readyState==4){
                   //判断响应状态吗（ajax.status 为响应的状态码）
                   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'/>";
               }
           }
       //4,发送请求
       ajax.open("get","ajax"); // get为请求方式 ajax为请求url
       ajax.send(null);    //发送请求到其他位置（serverlet 或 .jsp）此处null应为此请求方式为get的缘故
   }
</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></h3>
   <hr>
   <input type="text" name="uname" id="uname" value=""/>
   <input type="button" value="测试 " οnclick="getData()"/>
   <div id="showdiv"></div>
</body>
</html>

简述以上源代码：

1.onreadystatement函数有如下readyState值每当只发生变化就会自动触发此函数（避免重复多次调用此函数可以设定当此值为4时就行调用注意：此函数只有在声明后方可调用自己重写的）

2.open() send() 方法（ajax发送请求）

1，open() 方法可以设置get 或者 post请求(1,get: open("get","url") 2,post: open("post","url") )

其中open()方法的第三个参数为一布尔值默认（不填）为false：同步（等待此指令执行完在执行以下数据） true：为异步（不等待直接向下执行）

2，send() 方法可以发送post请求（1,如果open()方法设置为get方式则此方法参数为null send(null) 。2,post方式:

setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

send("user="+username+"&pwd="+password);）

https://blog.csdn.net/nn131452zk/article/details/7762221

3.Ajax的获取响应内容

1,获取响应内容(响应内容的格式)
a.普通字符串：ajax.responseText
b.json(重点)：ajax.responseText（可以下载一个gson.jar 工具包）【就是将一个Java对象转换成一个js的json对象】

其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法(eval()可以动态的执行js代码)
将接受的字符串数据直接转换为js的对象

对应serverlet对象中可使用： resp.getWriter().write(new Gson().toJson(u)); （u为你从数据库中拿出来的数据放在user对象中，然后通过toJson（）转换成这样的字符串 "{key:value,key:value......}"）

var result=ajax.responseText;
eval("var u="+result);

该方法也可以将list对象进行转换成类似字符串[ {key:value,key:value......} , {key:value,key:value......}, {...}... ]将得到一个json数组

json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……

}

c.XML数据：ajax.responseXML.返回document对象(需要将java对象转换成xml格式)
通过document对象将数据从xml中获取出来处理响应内容(js操作文档结）.

（doc.getElementsByTagName("name")[0].innerHTML）

[不建议使用该方法，一般xml用来配置文件]

4.Ajax的封装（.js）

/*
 	method:
 			请求方式，值为get或者post
 	url：请求地址
 	data:没有值需要传入null
 		有请求数据则传入字符串数据，格式为"a=1&b=2";
 	deal200:
 			接受一个带有一个形参的js函数对象，形参接收的实参是ajax引擎对象
 	deal404：接受一个js函数对象
 	deal500：接受一个js函数对象
 */

function myAjax(method,url,data,deal200,deal404,deal500,async){
	
	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){
				if(deal200()){   //注意此处的判断 因为js函数传递的参数可以不传完 所以防止没有传参而导致的错误
					deal200();
				}
			}else if(ajax.status==404){
				if(deal404){
					deal404();	
				}
			}else if(ajax.status==500){
				if(deal500){
					deal500();
				}
			}
		}
	}
	
	//发送请求
	if("get"==method){
		ajax.open("get",url+(data==null?"":"?"+data),async);
		ajax.send(null);
	}else if("post"==method){
		ajax.open("post",url,async);
		ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		ajax.send(data);
	}
}

AiT_Boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 笔记

1.什么是Ajax ? 场景：打开百度页面，当你在搜索栏里面输入东西的时候，会出现下拉框，里面有很多与你搜索的东西相关的供你选择，如图这些选项都是通过向服务器发送请求，服务器返回的数据，传统上服务器响应客服端，会刷新当前页面，而一个下拉框小小的变动，却需要服务器将整个页面从新发送，这使得资源浪费，响应重复信息。众所周知，js可以控制页面的元素，如下拉框信息，那么是...
复制链接

扫一扫