JS之Ajax初体验

最新推荐文章于 2020-08-01 22:30:36 发布

置顶 y_hh_

最新推荐文章于 2020-08-01 22:30:36 发布

阅读量119

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/y_hh_/article/details/107436229

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Ajax

Ajax 是Asynchronous Javascript + XML的简写，这一技术可以向服务器请求额外数据而无需卸载页面。而Ajax的核心就是XMLHttpRequest对象

XMLHttpRequest 工作原理

传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】
在这里插入图片描述

XHR 用法

var xhr =new XMLHttpRequest(); //这个对低版本的浏览器不支持
xhr.open('get', 'data', true); 
// 第一个参数是，请求类型 ，
//第二参数是url,这里是相对路径，相对当前页面，也可以是绝对路径
//第三个参数是说明是否异步
// open方法不会真正的发送请求，只是准备发送
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        console.log('xhr status == 4: response = '+xhr.response);
        p1.innerHTML = JSON.parse(xhr.response)['time'];
    }
}
// onreadystatechange 方法是当readState属性发生改变时触发， response属性是存放响应的内容
// readyState 属性
// 0 ----- 尚未初始化，未调用open()
// 1 ----- 启动，已经调用open(), 但未调用send()
// 2 ----- 发送，已经调用send()
// 3 ----- 接受，已经接受到部分相应数据
// 4 ----- 完成，表示已经全部接受完毕
xhr.send(null);
// send中的参数是请求主题要发送的数据，这里是get 因此设为null

代码

服务器

先在本地跑一个服务器
sever.js

var http = require('http');
var fs = require('fs');
var url = require('url');

//创建服务器
http.createServer(function (request, response) {
    //解析请求，包括文件名
    var pathname = url.parse(request.url).pathname;
    //输出请求的文件名
    console.log("Request for " + pathname + "  received.");

    //从文件系统中都去请求的文件内容
    fs.readFile(pathname.substr(1), function (err, data) {
        if (err) {
        	// 当找不到文件时返回一个当前的时间。
            let data =  new Date();
            response.writeHead(200, { 'Content-Type': 'application/json' });
            response.write(JSON.stringify({'time':data.toLocaleDateString()}))
        }
        else {
            //HTTP 状态码 200 ： OK
            //Content Type:text/plain
            response.writeHead(200, { 'Content-Type': 'text/html' });

            //写会相应内容
            response.write(data.toString());
        }
        //发送响应数据
        response.end();
    });
}).listen(8081);

console.log('Server running at http://127.0.0.1:8081/');

html 页面

在同一个文件夹下新建一个html 文件，用于发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8081</title>
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
   <p>这个是http://127.0.0.1:8081/index.html</p> 
   <input type="button" id='btn' value = "获取时间"">
   <p id ='p1'></p>
</body>
<script>
    var btn = document.getElementById('btn');
    var p1 = document.querySelector('#p1');
    function getTime(){
        var xhr =new XMLHttpRequest();
        xhr.open('get', 'data', true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                console.log('xhr status == 4: response = '+xhr.response);
                p1.innerHTML = JSON.parse(xhr.response)['time'];
            }
        }
        xhr.send(null);
        console.log('async');
    }
    btn.onclick =getTime;
</script>

</html>

效果
在这里插入图片描述
点击之后

参考

红宝书
https://blog.csdn.net/suwu150/article/details/72859767

y_hh_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之Ajax初体验

AjaxAjax 是Asynchronous Javascript + XML的简写，这一技术可以向服务器请求额外数据而无需卸载页面。而Ajax的核心就是XMLHttpRequest对象XMLHttpRequest 工作原理传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发
复制链接

扫一扫

专栏目录