开发模式

现在主流的web开发分为前端和后端。

前端是面向用户的一端，即浏览器程序开发(js css html … vue…)。
后端则是为前端提供服务，即服务器程序开发(Node,或者java…)。

前后端操作分为两类：

向服务器提交数据(表单交互)
向服务器查询数据(URL参数交互)

表单交互：
指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。

URL参数交互：
用于浏览器向服务器提交一些请求信息。
例如：http://localhost:3000/index?username=张三&gender=男

从上面的介绍我们可以看出来,基本上前端的数据都需要从后端去获取,那么数据是如何渲染到页面中的呢??同时让用户体验比较好呢?

Ajax概述

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。
在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。
包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

功能： 用于实现与服务器进行异步交互的功能。

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

原理:

AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库。
AJAX的核心是JavaScript对象XMLHttpRequest，该对象在IE 5中首次引入，使用户通过JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过这个对象，您的JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面。
在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器通信。

Ajax如何工作

网页中发生了一个事件(页面加载、按钮点击…)
由JavaScript创建XMLHttpRequest对象
XMLHttpRequest对象通过open()方法建立对服务器的调用、设置回调函数、调用
send()方法向web服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由JavaScript读取响应
由JavaScript执行正确的动作(比如更新页面)

前端和服务器之间交互对于用户来说是无感知的,用户能感知的就是页面内容发送变化了但是页面并没有被刷新

学习使用Ajax

XMLHttpRequest对象

XMLHttpRequest文档

Ajax 的核心是 XMLHttpRequest 对象。

所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同步后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
XMLHttpRequest 对象方法描述

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	把HTTP请求的所有响应头部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(method, url, async, user, psw)	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send()\|send(content)	将请求发送到服务器,send()用于 GET请求 send(content)用于POST 请求
setRequestHeader(“header”, “value”)	设置header并和请求一起发送 ('post’方法一定要 ),在设置任何头部之前必须先调用open()。

XMLHttpRequest 对象属性：

属性	描述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：<br>0：请求未初始化<br>1：服务器连接已建立<br>2：请求已收到<br>3：正在处理请求<br>4：请求已完成且响应已就绪
responseText	服务器的响应，返回数据的文本。
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = “文件末找到” 、200 =“成功” ，等等）
statusText	服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

使用Ajax-get请求

var xhr = new XMLHttpRequest;
xhr.open('get','http://localhost:8888/test/third?username=zhangsan&age=18');
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status<300){
            var res = xhr.responseText;
            // 将json字符串转成json对象
            // res = JSON.parse(res)
            console.log(res);
        }
    }
}

使用Ajax-post请求

var xhr = new XMLHttpRequest;
            xhr.open('post', 'http://localhost:7003/test/login');
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send("{'name':'aaa','pass':'aaa'}")
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var res = xhr.responseText;
                        // 将json字符串转成json对象
                        // res = JSON.parse(res)
                        console.log(res);
                    }
                }
            }

使用Ajax-表单提交请求

FormData文档

let form = document.getElementById('form')
            //FormData可以一次性获取form表单的全部内容,还可以在手动添加
            let formData = new FormData(form)
            var xhr = new XMLHttpRequest;
            xhr.open('post', 'http://localhost:7003/test/loginForm');
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(formData)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var res = xhr.responseText;
                        // 将json字符串转成json对象
                        // res = JSON.parse(res)
                        console.log(res);
                    }
                }
            }

使用Ajax-跨域请求

使用jsonp模式进行跨域,底层原理就是创建script,携带回调函数,只支持get请求

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
 
    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
 
    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

其他跨域方式,都是利用第三方技术来完成的,比如nginx,比如Webpack…

注意事项

动态渲染元素问题

使用Ajax 动态添加元素,无法直接进行事件绑定的, 是因为加载顺序的问题,普通js代码是在Ajax获取数据之前就执行完毕了, 所以普通js绑定事件是无法使用的,同时使用选择器也获取不到元素对象的会报错
解决办法: 我们可以通过事件委托的方式监听父级进行绑定子元素就能解决
列:

<div id="add"></div>
 <script>
        const add = () => {//省略ajax和标签添加操作}

      //绑定父元素(已存在的元素)
        document.querySelector('#add').addEventListener('click', function (e) {
            console.log(e.target.innerHTML);
        })
 </script>

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

JavaScript-Ajax