【一路发发发】轻松掌握Ajax作用Ajax意义Ajax同步交互与异步交互的概念与不同——同步交互——异步交互Ajax核心对象XMLHttpRequest Ajax原生或JQuery示例教程

何以为家？？？

于 2019-09-09 22:11:19 发布

阅读量256

点赞数 1

分类专栏： Ajax 文章标签： Ajax ajax同步交互 ajax异步交互 ajax核心对象原生

本文链接：https://blog.csdn.net/qq_42224077/article/details/100677207

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. Ajax作用

Ajax表示使用javascript收发来自web服务器的数据，且无须重载整个页面（仅刷新页面的局部）而无须刷新页面。这种技术允许开发人员创建不中断的应用程序，用新数据重载页面的某些部分。（简单理解–>就是客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax）

2. Ajax同步交互与异步交互的概念与不同

同步交互

同步交互：客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求).-------同步可以避免死锁，避免脏读

1、执行速度相对比较慢

2、响应的是完整的HTML页面

3. 异步交互

异步交互：客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做其他任何事情(不会像同步交互那样需要等待响应完)；------异步是非阻塞式

1、执行速度相对比较快

2、响应的是部分数据

4. Ajax核心对象 ------- XMLHttpRequest

XMLHttpRequest对象（通过该对象向服务器发送请求。）

5.JavaScript-Ajax （原生）------- ：示例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>JavaScript Ajax原生</title>
  </head>
  <body>
    
	<a href="/项目名/ajax" >普通请求到后台</a>	  
	<a href="javascript:;" onclick="demoAjax()">AJAX请求到后台</a>	 
	<span class="show"></span> 
	<script type="text/javascript">
    	//创建 XMLHttpRequest，并做浏览器的兼容
	  	// var xhr = new XMLHttpRequest;
    	// 原本如上可以直接创建AJAX的XMLHttpRequest对象，当时为了兼容IE5/6，所以写法如下：
    	var xhr;
	  	function createXMLHttpRequest(){
	  		// 浏览器兼容
	    	if(window.XMLHttpRequest){
	    		// 通用的浏览器（ iE7 > 以上）
	    		xhr = new XMLHttpRequest; 
	    	}else{
	    	    // IE6, IE5 浏览器执行代码，ActiveXObject 此对象只有在IE浏览器中才会被识别
	    	    xhr=new ActiveXObject("Microsoft.XMLHTTP");
	    	}
	  	}
	  	
	  	// AJAX操作
	  	function demoAjax(){
	  		//　创建XMLHttpRequest
	  		createXMLHttpRequest(); 
	  		// 初始化基本参数，包括请求方式、请求服务器（servlet）的地址、是否同步（flase）异步（true）
	  		// 当为同步请求时，需等待当前ajax响应完成后，才可继续操作其他操作
            //xhr.open("请求方式", "/项目名/ajax", 同步或异步);
            //xhr.open("get", "/项目名/ajax?name="+1, true);
	  		xhr.open("post", "/项目名/ajax", true);
	  		// 判断状态,是否响应成功
	  		xhr.onreadystatechange=success;
	  		// post传递参数需要添加请求头
	  		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  		// 发送（提交）参数，如果为post提交，则参数为提交的数据，如果为get提交，则参数为null即可。
	  		xhr.send("name=1&age=20");
	  	}
	  	
	  	function success(){
	  		// 表示请求已完成
	  		if(xhr.readyState==4){
		  		// 判断是否请求成功
		  		if(xhr.status==200){ 
		  			console.log(xhr.status);
		  			// 获取服务器返回的参数
		  			var text = xhr.responseText;
		  			alert(text);
		  		}
	  		}
	  	}
    </script>    
  </body>
</html>

JQuery-Ajax ------- ：示例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>JQuery-Ajax</title>
  </head>
  <body>
	<a href="/y04-ajax-demo/ajax" >普通请求到后台</a>	  
	<a href="javascript:;" id="get-ajax-btn">Jquery AJAX  get请求到后台</a>	 
	<a href="javascript:;" id="post-ajax-btn">Jquery AJAX  post请求到后台</a>	
	<a href="javascript:;" id="diy-ajax-btn">Jquery AJAX  自定义请求方式</a>	 
	<span class="show"></span> 
     //引入jquery.js文件
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		$("#get-ajax-btn").click(function(){
		  // jquery ajax 的get请求方式：$.get(url,callback)
		  $.get("/y04-ajax-demo/ajax?name=admin",function(data,status){
		     console.info("data:"+data);
		     console.info("status:"+status);
		  });
		});
		$("#post-ajax-btn").click(function(){
		  // jquery ajax 的post请求方式：$.post(url,data,callback)
		  $.post("/y04-ajax-demo/ajax",{"name":"postadmin","age":100},function(data,status){
		     console.info("data:"+data);
		     console.info("status:"+status);
		  });
		});
		//自定义请求
		$("#diy-ajax-btn").click(function(){
			$.ajax({
				url:"/y04-ajax-demo/ajax",
				type:"POST",
				data:{"name":"postadmin","age":100},
				async:true,
				// json,xml,text
				dataType:'json',
                    //请求成功执行
				success: function(result,status,xhr){
					console.info("result:"+result);
					console.info("status:"+status);
					console.info("xhr:"+xhr);
				},
				error: function(xhr,status,error){
					// 如果请求报错，就执行这里，一般不写
					console.info("xhr:"+xhr);
					console.info("status:"+status);
					console.info("error:"+error);
				}
				
			});
		});
    </script>    
  </body>
</html>

Servlet-后台请求执行

package com.ajax;


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 java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/ajax")
public class AjaxTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("=======get=============");
        String str = req.getParameter("name");
        System.out.println(str);
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        //返回数据
        String strw = "get请求成功返回";
        out.write(strw);
        // 清空缓存区
        out.flush();
        // 结束
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("========post============");
        String str = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(str);
        System.out.println(age);

        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        //返回数据
        Map<Integer,Integer> maps = new HashMap<Integer,Integer>();
        List<Map<Integer,Integer>> lists=new ArrayList<>();
        for(int i=0;i<=20;i++){
            maps.put(i,i);
            if(i%4==0) {
                lists.add(maps);
                maps=new HashMap<Integer,Integer>();
            }
        }
        System.out.println(maps);
        System.out.println(lists);
        out.write("/"+lists+"/");
        // 清空缓存区
        out.flush();
        // 结束
        out.close();
    }
}

Jar包：servlet-api.jar 路径：http://central.maven.org/maven2/servletapi/servlet-api/2.4/

何以为家？？？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【一路发发发】轻松掌握Ajax作用Ajax意义Ajax同步交互与异步交互的概念与不同——同步交互——异步交互Ajax核心对象XMLHttpRequest Ajax原生或JQuery示例教程

1. Ajax作用Ajax表示使用javascript收发来自web服务器的数据，且无须重载整个页面（仅刷新页面的局部）而无须刷新页面。这种技术允许开发人员创建不中断的应用程序，用新数据重载页面的某些部分。（简单理解–>就是客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax）2. Ajax同步交互与异步交互的概念与不同同步交互同步交互：客户端向服务器端发送请求,到服务...
复制链接

扫一扫

专栏目录