首页 > 其他分享 >858~860AJAX 概念、实现原生js

858~860AJAX 概念、实现原生js

时间:2023-02-23 10:12:08浏览次数:46  
标签:异步 xmlhttp 服务器端 858 js 响应 860AJAX 请求 客户端

AJAX:

  1.概念:Asynchronous Javascript And XML  异步的JavaScript 和 xml

    1.异步和同步:客户端和服务器端相互通信的基础上

      客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

      客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

      

    Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

      通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。

      这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

      传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

 

 

 

解:

  同步:

    客户端进行一些操作,这些操作可能会花费一些时间,客户端将会向服务器端发送一个请求比如点击按钮,超链接

    请求发送发到服务器端,服务器端收到了这个请求之后,服务器端会花费一些时间,来处理这个请求,处理完之后

    服务器端会把这个处理响应数据,返回给客户端,客户端收到了这个响应请求,客户端可以接着进行其他操作,客

    户端发送了请求到服务器端,服务器端再处理请求,做出响应这么个过程中,客户端必须等待服务器端的响应,在

    等待的期间客户端不能做其他操作。

  异步:

    客户端发送了一个请求到服务器端,服务器端收到请求后,服务器端会做出一些处理,服务器端处理完了之后,个

    给客户端做出了响应,客户端收到响应的结果,然后客户端就要处理这个响应结果,在异步的请求响应的过程中,

    客户端发送了请求到服务器端之,客户端就不用管这个响应是否处理了,他会接着做下一个操作,唯一的区别就在

    同步的请求客户端需要等待服务端的响应,异步的请求是客户端不需要等待服务端的响应客户端的操作是连续的

 

  2.实现方式:

    1.原生的JS实现方式(了解)

 //1.创建核心对象
		            var xmlhttp;
		            if (window.XMLHttpRequest)
		            {// code for IE7+, Firefox, Chrome, Opera, Safari
		                xmlhttp=new XMLHttpRequest();
		            }
		            else
		            {// code for IE6, IE5
		                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		            }
		            //2. 建立连接
		            /*
		                参数:
		                    1. 请求方式:GET、POST
		                        * get方式,请求参数在URL后边拼接。send方法为空参
		                        * post方式,请求参数在send方法中定义
		                    2. 请求的URL:
		                    3. 同步或异步请求:true(异步)或 false(同步)
		
		             */
		            xmlhttp.open("GET","ajaxServlet?username=tom",true);
		
		            //3.发送请求
		            xmlhttp.send();
		
		            //4.接受并处理来自服务器的响应结果
		            //获取方式 :xmlhttp.responseText
		            //什么时候获取?当服务器响应成功后再获取
		
		            //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
		            xmlhttp.onreadystatechange=function()
		            {
		                //判断readyState就绪状态是否为4,判断status响应状态码是否为200
		                if (xmlhttp.readyState==4 && xmlhttp.status==200)
		                {
		                   //获取服务器的响应结果
		                    var responseText = xmlhttp.responseText;
		                    alert(responseText);
		                }
		            }

    2.JQuery实现方式

      1.$.ajax()

      2.$.get()

      3.$.post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义方法
        function  fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 建立连接
            /*
                参数:
                    1. 请求方式:GET、POST
                        * get方式,请求参数在URL后边拼接。send方法为空参
                        * post方式,请求参数在send方法中定义
                    2. 请求的URL:
                    3. 同步或异步请求:true(异步)或 false(同步)
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式 :xmlhttp.responseText
            //什么时候获取?当服务器响应成功后再获取
            //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
            xmlhttp.onreadystatechange=function() {
                //判断readyState就绪状态是否为4,判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }}}
    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

    <input>
</body>
</html>

 

标签:异步,xmlhttp,服务器端,858,js,响应,860AJAX,请求,客户端
From: https://www.cnblogs.com/agzq/p/17146918.html

相关文章

  • js 给树形(层级)数组添加层级标识
    树形数据,需要给每层的数据添加层级,如下:consttreeData=[{id:1,name:'a',children:[{id:101,name:'a1',children:null}]},{......
  • json.dumps()使用indent参数 格式化输出json数据格式
    json.dumps() 方法 将一个Python数据结构转换为JSON字符串data=[{"name":"小王","sex":'男'},{"name":"小明","sex":'女'}]json_str=json.dum......
  • 使用 Three.js 的 3D 制作动画场景
    推荐:将 NSDT场景编辑器 加入你的3D开发工具链。由于GSL语法的复杂性,对于许多开发人员来说WebGL是一个未知的领域。但是有了Three.js,在浏览器中3D的实现变得简单......
  • JS滚动到页面底部
    code//例如:页面高度1000,屏幕高度900,相差100,//scrollTop:向上滚动100像素,就到达页面底部了。functionScrollToBottom(){$("html,body").animate({scrollTop:$......
  • nodejs 查用语法
    合并objectsvaro1={a:1};varo2={b:2};varo3={c:3};varobj=Object.assign(o1,o2,o3);console.log(obj);//{a:1,b:2,c:3}console.lo......
  • JS批量下载图片
    已用该文章的知识实现了批量下载,所需的两个JS文件可以在GitHub下载<scriptsrc="/js/jszip.js"></script><scriptsrc="/js/FileSaver.min.js"></script><script>......
  • js 内存泄露是什么?常见的有哪些?
    内存泄露定义:一块被分配的内存既不能使用也无法回收,直到浏览器进程结束;常见的有以下这些:1,意外的全局变量;2,console.log;3,DOM泄露;4,闭包;5,被遗忘的定......
  • spring boot内置tomcat运行JSP报错
    =============================================== 2023/2/23_第1次修改                       粽先生 ==================================......
  • js用正则截取标签内的数据,xml数据读取
    <aa>1<bb>2<cc>3</cc></bb><dd>4</dd></aa>如何使用正则表达式获取每个标签内容?......
  • ar小Demo(aframe.js)
    官网:https://aframe.io/中文网:https://www.techbrood.com/aframe/guides?p=building-a-basic-scene虚拟现实https://mp.weixin.qq.com/s/6ddpdknOHAKO9ORUPIqnAg......