Ajax易步技术

最新推荐文章于 2023-03-17 14:47:22 发布

fachew

最新推荐文章于 2023-03-17 14:47:22 发布

阅读量148

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/fachew/article/details/97062402

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

问题：
在删除成功以后，响应内容会将请求页面所有的内容覆盖新的响应内容。但我们希望在保留当前请求页面的基础上显示新的内容。
明确：（没有指明资源显示位置）
当前请求页面：指的不一定是浏览器中的一个标签页，一般frameset中的划分区域，都是单独的。
如果某个区域发起了请求，则这个区域可以称为当前请求页。
解决：使用Ajax
作用：实现网页的局部刷新
应用场景：搜索框提示语
地图
网页的其他功能

一、第一个ajax请求

**
创建ajax的流程：
1）创建ajax对象
2）声明事件监听
3）创建并发送ajax请求

1.JS

  <head>
    <base href="<%=basePath%>">
<script type="text/javascript">
//声明单击事件--ajax
  function testAjax(){
	  //创建ajax引擎
	  var ajax;
	  if(window.XMLHttpRequest){//火狐
		  ajax=new XMLHttpRequest();
	  }else if(Window.ActiveXObject){//ie
		  ajax=new ActiveXObject("Msxml2.XMLHTTP");
	  }
	  //声明事件监听
	  ajax.onreadystatechange=function(){
		//处理响应
			//获取响应内容
			var data=ajax.responseText;
		//获取div对象
		var div=document.getElementById("showdiv");
		div.innerHTML=data;
	  }
	  
	  //发送请求
	  	//创建请求
	  	ajax.open("get","my");
	  	//发送请求
	  	ajax.send(null);
  }
  </script>
  <head/>

2.JSP

 <input type="button" value="测试ajax" onclick="testAjax()"/>

注：在这个过程我一度没有把

二、ajax的状态码

声明事件监听：监听ajax对象的属性readystate的值，一旦readystate的值发生改变就会引发声明事件的函数的执行
readystate的值： 0：ajax引擎对象被创建
1：表示请求创建，但为发送
2：请求发送ajax.send(null);
3：请求处理完毕，正在接受响应内容
4：响应内容接受完毕（重要状态）

三、ajax的响应状态码

ajax.status
200:正常
404：找不到对象
500：服务器内部错误

四、ajax之响应数据

服务器响应给浏览器的数据应该是字符串类型，
但如果数据量比较大，我们需要在服务器端将数据拼接成一个良好的字符串数据，响应给浏览器，
浏览器根据格式进行数据的解析和使用。
问题：
什么样的格式算是良好的格式呢？
解决：
使用josn格式的字符串
josn的概念：
josn就是js创建对象的一种，保证数据的完整性和紧密性。
josn的格式:

var 对象名={
					键名：值,
					键名：值,
					键名：值,
					....
					}

使用：
在服务器端将想要的数据拼接成josn格式的字符串，这样客户端在接收到响应数据以后，可以使用eval方法将josn格式的字符串数据直接转换对应的js对象，便于数据的操作。
1.MyServlet

	//创建对象
	User u=new User(18,"张三",18, "写代码");
	//josn格式的字符串
	String str="{uid:18,uname:'张三',age:18,fav:'写代码'}";
	//响应请求信息
	resp.getWriter().write(str);

2.js

//获取响应内容
			var data=ajax.responseText;
			//使用eval方法将字符串数据转换为js对象
			eval("var obj="+data);//eval("var obj={uid:'18'+uname:'王五'+age:'18'+fav:'写代码'}")
		//获取div对象
		var div=document.getElementById("showdiv");
		div.innerHTML=obj.fav;

注：我们可以在服务器端使用类似Gson的工具包往常josn格式字符串的拼接。

	//创建对象
	User u=new User(18,"张三",18, "写代码");
	//josn格式的字符串
	String str=new Gson().toJson(u);
	//响应请求信息
	resp.getWriter().write(str);

四、ajax的同步异步

ajax.open(method,url,ansyc);
ansyc:设置异步或者同步请求，true表示异步，false，表示同步。默认是异步的。
异步：
当前js函数继续执行，无须等待ajax请求的响应以及响应的处理。
同步：
当前js函数会等待ajax请求以及响应，当ajax响应处理完毕后，继续执行函数的剩余代码。

五、ajax的请求方式

创建ajax请求(设置异步或者同步)
ajax.open(method,url,ansyc);
method:表示请求方式

get:
请求数据以?隔开的形式拼接在url的后面。
请求数据不能写在send方法中

//get请求方式
	  	//创建请求
	  	ajax.open("get","my?uname=张三&&pwd=123",false);
	  	//发送请求
	  	ajax.send(null);

post:
post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader(“ContentType”,“application/x-www-form-urlencoded”);
设置请求数据为键值对数据。如果有请求数据则ajax.send(“键值对数据&键值对数据…”),如果没有请求数据则ajax.send(null)

//post请求方式
	  		//创建请求
	  	ajax.open("post","my",false);
	  	//设置请求参数为键值对方式
	  	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	  	//发送请求
	  	ajax.send("uname=张三&&pwd=123");

六、明确流程

明确流程：
1、创建ajax引擎对象
2、声明监听函数
//判断ajax状态码
//判断响应状态码
//获取响应信息(普通字符串和json格式的字符串)
//处理响应
3、创建并发送ajax请求
创建请求(设置请求方式，设置请求地址，设置异步或者同步)
发送请求
4、其他处理

fachew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax易步技术

问题：在删除成功以后，响应内容会将请求页面所有的内容覆盖新的响应内容。但我们希望在保留当前请求页面的基础上显示新的内容。明确：（没有指明资源显示位置）当前请求页面：指的不一定是浏览器中的一个标签页，一般frameset中的划分区域，都是单独的。如果某个区域发起了请求，则这个区域可以称为当前请求页。解决：使用Ajax作用：实现网页的局部刷新应用场景：搜索框提示语地图网页的其他...
复制链接

扫一扫