关于ajax的一些简单实用

传统的开发模式,前端必须要提交数据给后台处理.如果网速过慢,耗时.导致用户等待很长一段时间,但在等待的事件之内,用户无法进行其他操作

ajax技术可以解决这个问题,它不需要将数据进行跳转提交,而是通过ajax请求将数据直接发给服务器,然后得到服务器的结果之后,更新页面

1.使用ajax技术的原因：

　　①避免页面提交造成跳转行为，使用ajax请求数据完成浏览器端渲染，减轻服务器压力

　　②ajax发送请求时是异步的，并不会影响到当前页面。

特点 :

异步请求

局部刷新

同步:同一时间内只能做一件事情,一件事情做完了再去做另一件事情

异步:同一时间内可以做多件事情,其实有别的对象帮你做事情

使用XMLHttpRequest对象(浏览器内置对象)可以帮助我们做事情(发送请求到服务器,接收服务器返回的结果)

如何使用XMLHttpRequest对象发送GET请求

<script>
        window.onload = function() {
            document.querySelector("#textname").onblur = function() {
                //当焦点离开用户名文本框时,获取到用户输入的用户名
                var value = this.value;
                //然后将用户名发送给服务器验证用户名是否存在
                // 使用ajax将用户名发送给服务器
                // 1.创建ajax核心对象 
                var xhr = new XMLHttpRequest;
                //2.设置请求行  依靠核心对象的open方法    open("请求方式","url地址")
                xhr.open("get", "01-get.php?username=" + value) //不区分大小写   true异步请求
                //3.设置请求头  get请求无需设置请求头
                //4.设置请求体   get请求是将请求拼接在url地址后面
                //5.发送请求,使用核心对象.send()发送请求
                //get请求发送时的固定写法   核心对象.send(null)
                xhr.send(null);

                //6.监听服务器是否正常返回结果
                xhr.onreadystatechange = function() {
                    // xhr.readyState:0,1,2,3,4      4是服务器已经正常返回了数据,而且浏览器已经将数据解析完毕
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) { //判断服务器正常的处理了请求
                            //通过xhr.responseText
                            document.querySelector("#usernameInfo").innerHTML = xhr.responseText;
                        }
                    }
                }
            }
        }
    </script>

补充：服务器返回的状态码 200：处理成功 404：找不到页面，肯定是因为前端写错地址了 500：服务器异常，后台的问题。

4.如何使用XMLHttpRequest对象发送post请求

//1.创建核心对象 var xhr = new XMLHttpRequest(); 
//2.设置请求行xhr.open("post","02post.php"); 
//3.设置请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
//4.设置请求体 var body = "nickname="+value; xhr.send( body ); 
//5.监听服务器是否返回数据给浏览器 
xhr.onreadystatechange = function(){ 
//浏览已经将服务器返回的数据解析完毕 服务器响应状态为正常 
if( xhr.readyState == 4 && xhr.status == 200){ 
document.querySelector("#nicknameInfo").innerHTML = xhr.responseText; } }

补充：

html静态页面：只有html代码，是以.html为后缀名的文件

php混编页面:有html代码，也有php代码，是以.php为后缀名的文件，文件可能会出现混编代码

php数据接口:现代开发模式，前端在前端页面中只需要写html，js，css，不需要再去嵌套后台代码。那就需要请求数据接口来获得服务器的数据。所谓的数据接口页面就是纯粹的只有后台代码并且能返回数据的页面。

后台开发人员在开发完了后台数据接口之后，需要给前端开发人员提供一个"接口说明文档"

5.es6中的反引号字符串(模板字符串)

//javascript中引号字符串有什么问题？

1.在字符串中无法直接填写一个变量，必须进行字符串拼接

2.引号字符串中的内容不支持换行

//在es6中，新增了反引号字符串

//反引号字符串支持换行

//反引号中可以使用${ }来填入变量

 var str = "";
        data.forEach(function(ele, index) {
         str += `<li>
                     <a href="#">
                         <img src="${ele.src}" alt="">
                         <p>${ele.text}</p>
                      </a>
                  </li> `
                })
    document.querySelector("ul").innerHTML = str;

6.浏览器端渲染、服务器端渲染：

浏览器端渲染：在html页面中发送ajax请求获取到服务器的数据，通过js代码将数据生成html结构代码，因为js代码是运行在浏览器的，消耗客户的电脑性能，这种渲染方式就叫做浏览器端渲染。前端开发人员必须掌握的渲染方式

服务器端渲染：在后台页面中通过查询数据库的方式获取到数据，并将数据通过后台代码来生成需要的html结构代码，因为是后台代码，所以是服务器运行代码来生成结构，消耗的是服务器的性能，这种渲染方式叫做服务器端渲染。后台开发要做的事情

关于ajax的一些简单实用

猜你喜欢