Java学习总结 Ajax

最新推荐文章于 2023-05-16 11:33:31 发布

程序员小郑

最新推荐文章于 2023-05-16 11:33:31 发布

阅读量8.8k

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/shawnyue1995/article/details/107187469

版权

Java学习总结 Ajax

一.Ajax简介

1.Ajax是什么?

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

传统Web应用中简易的同步模型分析:
在这里插入图片描述
基于Ajax技术的异步请求响应模型分析:

2.Ajax技术应用场景

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:商品系统,评价系统,地图系统

AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。

3.Ajax技术时序模型分析

传统Web应用中的同步请求应用时序模型分析:
在这里插入图片描述
客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。

Ajax技术的Web异步请求响应模型:
在这里插入图片描述
客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。

二.Ajax快速入门

1.Ajax请求响应过程分析

所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新

在这里插入图片描述

2.Ajax编程基本步骤

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)
在这里插入图片描述

回调的过程分析:

在这里插入图片描述

3.Ajax请求响应编程操作实践

1)Ajax Get请求操作实现

基于ajax技术中的XMLHttpRequest对象，向服务端发起异步Get请求

function doAjaxGet(url,params,callback){
      //1.创建XmlHttpRequest对象
       var xhr=new XMLHttpRequest();
      //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
       xhr.onreadystatechange=function(){//callback(回调函数)
        //基于xhr对象获取的通讯状态，对响应数据进行处理
        //readyState状态说明
        //0：未初始化，尚未调用open() 方法
        //1：启动。已经调用open() 方法，但尚未调用send() 方法
        //2：发送。已经调用send() 方法，但尚未接收到响应
        //3：接收。已经接收到部分响应
        //4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
        
             if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
        	   //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
        	   callback(xhr.responseText);
          }
      }
     //3.创建与服务端的连接
      xhr.open("GET",url+"?"+params,true);//true表示异步
      //4.发送请求
      xhr.send(null); //Get请求，send方法不传内容
    //5.对响应结果进行处理(在回调函数中处理)。
 }

2)Ajax Post请求操作实现

基于ajax中XMLHttpRequest对象，向服务端发起异步Post请求。对于post请求在发送请求执行需要设置请求头,见红色代码部分。

 function doAjaxPost(url,params,callback){
	 //1.创建XmlHttpRequest对象
	 var xhr=new XMLHttpRequest();
	 //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
	 xhr.onreadystatechange=function(){//callback(回调函数)
		 //基于xhr对象获取的通讯状态，对响应数据进行处理
		 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
			//服务端响应的结果会传递给XHR对象，
                  //我们可以借助xhr.responseText获取响应结果
			callback(xhr.responseText);
		 }
	 }
	 //3.创建与服务端的连接
	 xhr.open("POST",url,true);//true表示异步
	 xhr.setRequestHeader("Content-Type",
       "application/x-www-form-urlencoded");
	 //4.发送请求
	 xhr.send(params); //post请求将参数写到send方法
	 //5.对响应结果进行处理(在回调函数中处理)。
 }

4.Ajax编程框架基本实现

我们在实际的js编程中经常会以面向对象的方式进行实现,例如前面的doAjaxGet函数如何以对象方法进行应用呢?

我们可以创建一个js文件,将ajax的基本步骤封装成一个对象,如下图:
在这里插入图片描述
在html文件中调用封装好的Ajax对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button onclick="doAjaxGetRequest()">doAjaxGetRequest</button>
    <button onclick="doAjaxPostRequest()">doAjaxPostRequest</button>
</div>
<div id="result"></div>
<script src="/js/ajaxfk.js" type="text/javascript"></script>
<script type="text/javascript">
    function doAjaxGetRequest() {
        //1.定义请求url
        var url = "/ajax/doAjaxGetRequest";
        //2.定义请求参数
        var params = "key=A";
        //3.调用Ajax对象发送ajax请求
        Ajax.doAjaxGet(url, params, function (result) {
            var div = document.getElementById("result");
            //innerHTML表示将result内容以html方式显示在obj对象内部
            div.innerHTML = result;
        });
    }

    function doAjaxPostRequest() {
        //1.定义请求url
        var url = "/ajax/doAjaxPostRequest";
        //2.定义请求参数
        var params = "key=A&value=100";
        //3.调用Ajax对象发送ajax请求
        Ajax.doAjaxPost(url, params, function (result) {
            alert(result)
        });
    }
</script>
</body>
</html>

程序员小郑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习总结 Ajax

Java学习总结 Ajax(未更新完)一.Ajax简介1.Ajax是什么?Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。传统Web应用中简易的同步模型分析:基于Ajax技术的异步请求响应模型分析:2.Ajax技术应用场景Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很
复制链接

扫一扫