一小时掌握Ajax

最新推荐文章于 2024-02-17 13:45:00 发布

辉猪子

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量201

点赞数 1

分类专栏： Ajax 文章标签： ajax java js http

本文链接：https://blog.csdn.net/m0_48930261/article/details/108359506

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax简介

异步刷新技术 Asynchronous JavaScript and xml

注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术

在这里插入图片描述

Ajax工作原理

数据都是在服务器上的，要获取数据，就必须要向服务器发送请求，然后等待服务器的响应，通过from表单提交，或者通过url地址栏，或者超链接等等技术进行的发送，都是同步的，整个页面是会刷新的

在这里插入在这里插入图片描述图片描述

Ajax的编写使用

原生JavaScript实现Ajax请求

通过Ajax技术从服务上获取一个字符串，然后将此字符串显示在页面的指定位置

1、创建Ajax对象
2、连接服务器
3、发送请求
4、接收返回

 4、接收返回		
  - //客户端和服务器有交互的时候会调用onreadystatechange
  - 
 oAjax.onreadystatechange=function(){
      	//oAjax.readyState    
 	//浏览器和服务器进行到哪一步了
 	//0-->（未初始化） 还没有调用 open（）方法
 	//1-->（载入）             已调用send（）方法，正在发送请求
 	//2-->(载入完成)      send（）方法完成，已收到全部响应内容
 	//3-->（解析）             正在解析响应内容
 	//4-->（完成）              响应内容解析完成，可以在客户端调用
 					
 if(oAjax.readyState==4){
 	//判断是否成功，如果是200，就代表成功（判断HTTP协议状态）
 		if(oAjax.status==200){
 			//oAjax.responseText  从服务器响应回来的内容

 document.getElementById("msg").innerHTML=oAjax.responseText;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用原生JavaScript实现Ajax请求</title>
<style>
		#msg{
				border:#F00 1px solid;
				widht:300px;
				height:100px;
		}
</style>
<script>
			var getdata= functon(){
				//1、创建Ajax对象
				//只兼容非ie6的浏览器，在ie6的浏览器上运行会提示没有被定义
				//var oAjax =new  XMLHttpRequest();这才是Ajax实际的请求
				//
				//ie6浏览器按照下面方法写，但在别的浏览器不能用，会报错
				//var  oAjax = new ActiveXObject("Microsoft.XMLHTTP");
				//鉴于上面出现的问题，可以采用下面的方法解决，用if判断是否为ie6 浏览器
				//
				//如果有XMLHttpRequest，那就是ie6 浏览器，()里面加window的原因下面会有描述
				var oAjax;
				
				if(window.XMLHttpRequest){
					oAjax=new  XMLHttpRequest();//创建Ajax对象
				}
				
				else{
					//如果没有XMLHttpRequest，那就是ie6浏览器
					oAjax =new  ActiveXObject("Microsoft.XMLHTTP");//ie6浏览器创建Ajax对象
				}
				
				//2、连接服务器
				//open（方法、文件名uuuuu、异步传输）
				//方法：
				 //       传输方式是get方式还是post方式
				 // 文件名（资源地址）：
				 //        告诉服务器要读哪个文件
				 // 异步传输：
				 //         异步：多件事一件一件的做
				 //         同步：多件事一起进行
				 //         但在js里面异步同步和现实的异步同步相反
				 //                            异步：多件事一起进行
				 //                           同步：多件事一件一件的做
				 
				 
				 
				 //ajax天生是用来做异步的
				 oAjax .open("GET", "/sevlet/Ajax", true);
				
				//3、发送请求
				oAjax.send();
				
				//4、接收返回
				//客户端和服务器有交互的时候会调用onreadystatechange
				oAjax.onreadystatechange=function(){
					//oAjax.readyState    
					//浏览器和服务器进行到哪一步了
					//0-->（未初始化） 还没有调用 open（）方法
					//1-->（载入）             已调用send（）方法，正在发送请求
					//2-->(载入完成)      send（）方法完成，已收到全部响应内容
					//3-->（解析）             正在解析响应内容
					//4-->（完成）              响应内容解析完成，可以在客户端调用
					
					if(oAjax.readyState==4){
						//判断是否成功，如果是200，就代表成功（判断HTTP协议状态）
						if(oAjax.status==200){
							//oAjax.responseText  从服务器响应回来的内容
							
							document.getElementById("msg").innerHTML=oAjax.responseText;
							
						}
						else{
						    alert("失败");	
						}
					}
				} 
		}
		
</script>
</head>
<body>
		<p>需求：通过Ajax技术从服务上获取一个字符串，然后将字符串显示在页面的指定位置</p>
		<input type="button" id="btn"   value="获取"  onclick="getdata();"/>
</body>
</html>

jQuery实现Ajax请求

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

html / Ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jquery实现Ajax请求</title>
<script  type="text/javascript"   src="/WebContent/WEB-INF/lib/jquery-3.2.1.min.js"></script>

<style>
		#msg{
				border:#F00 1px solid;
				widht:300px;
				height:100px;
		}
</style>

<script type="text/javascript">

		var getdata=function(){
			$.ajax({
				  type:"GET",            //发送http请求的方法（get/post）
				  url:"/WebContent/admin/art/artcontent/Ajax.html",       //请求的资源路径
				  success:function(msg){       //成功后的回调函数
					  //在这里进行成功后的处理
					  $("#msg").html(msg);
				  }
			})
		}
</script>
</head>
<body>
			<p>需求：通过Ajax技术从服务上获取一个字符串，然后将字符串显示在页面的指定位置</p>
		<input type="button" id="btn"   value="获取"  onclick="getdata();"/>
		<div  id="msg">
				在这里显示数据：
		</div>
</body>
</html>

servlet / AjaxServlet

package edu.etime.yqxcms.servlets;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.ws.Response;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/Ajax")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {

	       PrintWriter   out  =  response.getWriter();
	       out.println("这是从服务器servlet上传过来的消息");
	       out.flush();
	}
       
	


}