Ajax

Oinkk

于 2018-08-01 21:03:44 发布

阅读量228

点赞数

文章标签： Ajax

本文链接：https://blog.csdn.net/weixin_41985061/article/details/81347654

版权

B/S架构的web应用相比C/S应用程序在界面效果和操控性方面差很多，但是使用了Ajax异步发送请求方式可以让用户获得类似桌面程序的用户体验。

痛点：传统WEB应用---每次请求生成新的页面，用户提交后，要等待服务器相应（独占式请求），若服务器相应没有结束，用户要一直等待，用户体验很差，服务器负担重。

Ajax技术--可以完美弥补以上缺点，Ajax应用使用JavaScript异步发送请求（在一个请求的服务器响应还没返回时，可以再次发送请求），不用每次请求都重新加载页面，发送请求时可以继续其他操作，在服务器完成相应后，再使用JavaScript将相应展示给客户。

从用户发送请求到获得相应，当前用户界面在整个过程中不受干扰。而且我们可以在必要的时候只更新页面的一小部分，而不用刷新整个页面，即“无刷新”技术。

优势：1.避免了重复加载，浪费网络资源的现象，提高了加载速度

2.提供连续的用户体验，而不被页面刷新中断（看视频时的其他操作）

传统web开发技术和Ajax技术的区别：

共同点：流程都是先由客户端发送Http请求，然后由服务器对请求生成响应。

差异：

1.发送请求方式不同：传统web应用-------通过web浏览器发送请求，Ajax技术------通过JavaScript的XMLHttpRequest对象

2.服务器响应不同：传统web应用------服务器的响应的是一个完整页面，Ajax技术-------服务器的响应只是需要的数据

3.客户端处理响应方式不同：传统web应用---------浏览器等待服务器响应完成后重新加载整个页面，Ajax-------通过JavaScipt动态更新页面中需要更新的部分

Ajax（Asynchronous JavaScript and XML）由JavaScript、XML、CSS等现有技术整合而成。

Ajax执行流程：

1.用户界面触发时间调用JavaScript

2.通过Ajax引擎--XMLHttpRequest对象异步发送请求到服务器

（Ajax引擎：即XMLHttpRequest，以异步方式在客户端与服务器端之间传递数据）

3.服务器返回XML、JSON、HTML格式的数据

4.利用返回的数据使用DOM和CSS技术局部更新用户界面

XMLHttpRequest：

XMLHttpRequest对象可以在不刷新当前页面的情况下向服务器端发送异步请求，并接收服务器端的响应结果，从而实现局部更新当前页面的功能。

1.创建XMLhttpRequest对象：

用window.XMLHttpRequest的返回值判断创建哪个，返回true：IE6↑；false：IE6↓

分为IE6以上和IE6以下版本：

老版本IE（IE5/IE6）：XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

新版本IE和其他大部分浏览器：XMLHttpRequest = new XMLHttpRequest();

XMLHttpRequest对象常用属性和方法：

一、方法：

open（String method,String url,boolean async）：用于创建一个新的HTTP请求

method：设置HTTP请求方法，post还是get，大小写无所谓

url：请求的url地址

async：指定次请求是否为异步方法，默认为true

send（String data）：发送请求到服务器

data：字符串类型，，通过次请求发送的数据。此参数值决定于open方法中的method参数。

如果method为post，则可以指定参数。

如果method为get，则该参数为"null"

setRequestHeader（String header,String value）单独设置请求的某个HTTP头信息，header：要指定的HTTP头名称

value：要指定的HTTP头名称所对应的值。---一般用于post方法设置

二、属性：

onreadystatechange：设置回调函数

readyState：返回请求的当前状态

0-------------未初始化

1-------------开始发送请求

2-------------请求发送完成

3-------------开始读取响应

4-------------读取响应结束

status：返回当前请求的HTTP状态码

200----------正确返回

404----------找不到访问对象

500----------内部错误

403----------无访问权限

用readyState==4&&status==200判断响应成功，再继续下一部的判断

statusText：返回当前请求的响应行状态正常显示“OK”

responseText：以文本形式获取响应值（一般在回调函数中使用）

responseXML：以XML格式获取响应值，并且解析成DOM对象返回

示例：

使用Ajax实现：用户文本框失去焦点，发送请求到服务器判断用户名是否存在，若存在提示“用户名已被使用”

前端页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testname.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script>
		var httpRequest;  //在外面声明为公共对象
		//创建XMLHttpRequest对象
		function createRequest(){
			if(window.XMLHttpRequest){     //返回true说明是IE6以上版本或其他浏览器
				httpRequest = new XMLHttpRequest();
			}else{						   //返回true说明是IE6以下版本
				HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		
		function doajax(){   		//创建HTTP请求，发送HTTP请求，创建回调函数
			createRequest(); 		//调用函数创建XMLHttpRequest对象
			var uname = document.getElementById("uname").value;  //获取表单输入内容
			httpRequest.onreadystatechange=huidiao;    			 //设置回调函数，监听服务器的响应状态并做出相应处理
			//httpRequest.open("get", "TestServlet?name="+uname, true);  		 //通过open方法创建新的HTTP请求,把name值发送到服务器端
			//httpRequest.send(null);
			httpRequest.open("post", "TestServlet", true);
			httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //post方法，需要设置setRequestHeader，死的
			httpRequest.send("name="+uname);
		}
		
		function huidiao(){										 //创建回调函数
			var sp = document.getElementById("sp");
			if(httpRequest.readyState==4&&httpRequest.status==200){   //readyState=4和status=200同时满足意味着响应接收成功
				var fg = httpRequest.responseText; 				//通过responseText属性获取响应值
				if(fg==2){
					sp.innerHTML="可以使用";
				}else{
					sp.innerHTML="用户名已被使用";
				}
			}
		}
		
	</script>
  </head>
  
  <body>
    name:<input type="text" id="uname" name="uname" onblur="doajax()"/><span id="sp"></span></br>
  </body>
</html>

服务器端：

package Servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class TestServlet extends HttpServlet {
 
 
	public TestServlet() {
		super();
	}
 
 
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}
 
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
 
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		String name = request.getParameter("name");
		if(name.equals("sa")){
			out.println(1);		//如果是1,则显示用户名已存在
		}else{
			out.println(2); 	//如果是2,则用户名可以使用
		}
	}
 
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
 
		this.doGet(request, response);
	}
 
	
	public void init() throws ServletException {
		// Put your code here
	}
 
}

Oinkk

关注

0
点赞
踩
0

收藏

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

B/S架构的web应用相比C/S应用程序在界面效果和操控性方面差很多，但是使用了Ajax异步发送请求方式可以让用户获得类似桌面程序的用户体验。痛点：传统WEB应用---每次请求生成新的页面，用户提交后，要等待服务器相应（独占式请求），若服务器相应没有结束，用户要一直等待，用户体验很差，服务器负担重。Ajax技术--可以完美弥补以上缺点，Ajax应用使用JavaScript异步发送请求...
复制链接

扫一扫

Ajax

“相关推荐”对你有帮助么？