Ajax的一点用法

最新推荐文章于 2023-01-11 23:32:18 发布

智障不怕尴尬

最新推荐文章于 2023-01-11 23:32:18 发布

阅读量223

点赞数

分类专栏： JS 文章标签： ajax nodejs

本文链接：https://blog.csdn.net/qq_29022327/article/details/77679908

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是Ajax？

一种快速实现动态网页的技术。

操作过程是什么？

首先你得创建一个服务器（下面是一个简单的nodejs服务器）

var http = require('http');//引入http模块
var fs = require('fs') ；//引入fs模块

http.createServer(
    function(req,res){
        console.log(req.url)
        //判断请求，根据open函数的get值
        if(req.url=="/"){
            fs.readFile('Ajax.html',function(error,data){
                if(error){
                    console.log(error);
                    res.end(error.toString())
                }else{
                    res.end(data.toString())
                }
            })
        }   
    }
).listen(8088,fn(){console.log('这是回调函数')})

创建一个默认页面（路径置于nodejs.exe同等位置、名字见上）

……
<body>
    <button onclick='loadData()'></button>
</body>
……

网页创建通信对象

<script>
    function loadData(){
        //创建请求对象
        var httpTool;

        if(window.XMLHttpRequest) { //如果浏览器有XMLHttpRequest这个对象就创建
            httpTool = new XMLHttpRequest()
        } else { //没有就创建ActiveXObject(针对老版本浏览器)
            httpTool = new ActiveXObject("Microsoft.XMLHTTP")
        }

网页发送请求消息

        //发送网络请求
        httpTool.open('get', '自定义的有意义字符串');
        //服务器将会以这个字符串作为返回数据的依据
        httpTool.send()

网页监听服务器传回数据

        //监听管道，当步骤为4的时候，后端发数据（w/r）过来
        //httpTool.readState;0:请求没有初始化 1:服务器建立连接 2:请求已接受 3:请求处理ing 4:请求完成,响应已经就绪

        httpTool.onreadystatechange = function() {
            //如果等于4，后端发数据过来了
            if(httpTool.readyState==4) {
                if(httpTool.status == 200){
                    //正确的数据
                    //得到数据
                    //解析数据
                    //dom操作
                    console.log(httpTool.responseText);
                    //根据上面的结果更新网页
                }else if(httpTool.status == 404){
                    //不是想要的数据
                    console.log(404)
                }else{
                    console.log('error:'+httpTool.status);
                }
                console.log(httpTool.responseText);
            }else{
                //console.log('error');
            }
        }
    }
    </script>

Ajax传送数据的一个不足（JSONP产生了？）

尝试用以下的代码创建服务器，不创建网页（注意这里没有创建对象进行监听了，
这有个名称叫做跨域访问）

//服务器js代码
var http = require('http');
http.createServer(
    function(req,res){
        var data = '{"name":"Shawn","age":18,"0":"NULL"}';
        if(req.url=="/ThisIsSendFromServer"){
            res.end(data);
        }
        if(req.url=="/ThisIsFnSendFromServer"){
            res.end('fromServer('+data+')');
        }   
    }
).listen(8088);
//网页访问下面网址
http://localhost:8088/ThisIsSendFromServer
//任意位置的html代码，使用src获取上面数据，用script会容易解析
<html>
    ……
    <body>
    <script src='http://localhost:8088/ThisIsSendFromServer'></script>
    </body>
</html>

//下面可真正操作数据
<html>
    ……
    <body>
    <script>
        fromServer(data){
            //自己思考为什么这样就可以获得真正数据
            console.log(data);
        }
    </script>
    <script src='http://localhost:8088/ThisIsFnSendFromServer'></script>
    </body>
</html>