AJAX原理

3周前 (09-30) 157次浏览 已收录 0个评论

请求的一生(readyState)

  • const request=new XMLHttpRequest() ->  0(0是readyState状态码)
  • request.open()    -> 1
  • request.send()     ->2
  • 当第一个信息出现在浏览器中->3(开始下载了)
  • 下载完全部信息->4

AJAX加载CSS/JS/XML…

  • 创建XMLHttpRequest对象
  • 调用对象的open方法
  • 监听对象的onload(成功)和onerror(失败)事件(不推荐)
  • 监听对象的onreadystatechange事件(推荐)
  • 发送请求
由于本篇文章涉及服务端,所以暂时没有案例展示

mian.js

仔细阅读getCSS的代码,内含AJAX的生命周期,并且json、xml的读取方法与html、css、js不一样
getCSS.onclick=()=>{
    // 创建一个请求HttpRequest对象
    const request=new XMLHttpRequest()
    // 调用对象的open方法
    request.open('GET','/style.css'); //readyState=1
    request.onreadystatechange=()=>{
        console.log(request.readyState)
        // 全部下载完成后readyState=4
        if(request.readyState===4){
             //虽然下载完成,但是有可能是404下载完成了(失败4xx 5xx),
              //而不是css下载完了(2xx),这也是onload没有的功能
            console.log("说明下载完成了")
            //状态码正常
            if(request.status >= 200 && request.status<300){
                //创建style标签
                const style = document.createElement("style");
                //填写style内容
                style.innerHTML=request.response;
                //插到头里面
                document.head.appendChild(style)
            }else{
                alert("加载css失败");
            }
        }
    };
    // 发送请求
    request.send()  //readyState=2
    //下载第一个字节信息后,readyState=3
};
getXML.onclick=()=>{
    // 创建一个请求HttpRequest对象
    const request=new XMLHttpRequest()
    // 调用对象的open方法
    request.open('GET','/4.xml'); //readyState=1
    request.onreadystatechange=()=>{
        console.log(request.readyState)
        // 全部下载完成后readyState=4
        if(request.readyState===4){
             //虽然下载完成,但是有可能是404下载完成了(失败4xx 5xx),而不是css下载完了(2xx),这也是onload没有的功能
            console.log("说明下载完成了")
            //状态码正常
            if(request.status >= 200 && request.status<300){
                const dom=request.responseXML
                const text=dom.getElementsByTagName('warning')[0].textContent
                console.log(text);
            }else{
                alert("加载xml失败");
            }
        }
    };
    // 发送请求
    request.send()  //readyState=2
    //下载第一个字节信息后,readyState=3
};
getJSON.onclick=()=>{
    // 创建一个请求HttpRequest对象
    const request=new XMLHttpRequest()
    // 调用对象的open方法
    request.open('GET','/5.json'); //readyState=1
    request.onreadystatechange=()=>{
        console.log(request.readyState)
        // 全部下载完成后readyState=4
        if(request.readyState===4){
             //虽然下载完成,但是有可能是404下载完成了(失败4xx 5xx),而不是css下载完了(2xx),这也是onload没有的功能
            console.log("说明下载完成了")
            //状态码正常
            if(request.status >= 200 && request.status<300){
                const object=JSON.parse(request.response)
                console.log(object)
                myname.textContent=object.name
            }else{
                alert("加载json失败");
            }
        }
    };
    // 发送请求
    request.send()  //readyState=2
    //下载第一个字节信息后,readyState=3
};

写入server.js

//创建路由
if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/index.html'))
    response.end()
  } else if(path === '/mian.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/mian.js'))
    response.end()
} else if(path==='/style.css'){
      response.statusCode = 200
      response.setHeader('Content-Type', 'text/css;charset=utf-8')
      response.write(fs.readFileSync('public/style.css'))
      response.end()
  }else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你输入的路径不存在对应的内容`)
    response.end()
  }

静态服务器

response.statusCode = 200
    //默认首页
    const filepath=path==='/' ? 'index.html' : path
    const index=filepath.lastIndexOf('.')
    const houzhui=filepath.substring(index)
    const fileTypes={
      '.html':'text/html',
      '.css':'text/css',
      '.js':'text/javascript',
      '.png':'image/png'
    }
    response.setHeader('Content-Type', 
    ${fileTypes[houzhui] || 'text/html'}charset=utf-8’)
    let content
    try {
      content= fs.readFileSync('public/'+filepath)
    } catch (error) {
      content='文件不存在'
      response.statusCode=404
    }
    response.write(content)
    response.end()

终端执行node-dev server.js 8888


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:AJAX原理
喜欢 (3)

您必须 登录 才能发表评论!