Git Product home page Git Product logo

ajax-1's Introduction

AJAX-1

AJAX(上) AJAX请求css,js,html,xml,json以及实现最基础的分页

实现五个挑战:

* 用AJAX加载CSS,并使其生效

//server.js
else if(path === '/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(fs.readFileSync('public/1.css'))
    response.end()
  }
//main.js 内容
getCss.onclick=()=>{
    const request= new XMLHttpRequest()
    request.open('GET','/1.css')
    request.onreadystatechange=()=>{
        if(request.readyState===4 && request.status===200){
            const style = document.createElement('style')
            style.innerHTML=request.response
            document.head.appendChild(style)
        }alert('下载失败呢')
    }
    request.send()
}

* 用AJAX加载JS,并使其执行

//server.js
else if(path === '/2.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.write(fs.readFileSync('public/2.js'))
    response.end()
  }
//main.js 内容
getJS.onclick=()=>{
    const request= new XMLHttpRequest()
    request.open('GET','/2.css')
    request.onreadystatechange=()=>{
        if(request.readyState===4 && request.status===200){
            const script = document.createElement('script')
            script.innerHTML=request.response
            document.body.appendChild(script)
        }alert('下载失败呢')
    }
    request.send()
}

* 用AJAX加载HTML,并使其出现在页面中

//server.js
else if(path === '/3.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('public/3.html'))
    response.end()
  }
//main.js 内容
getJS.onclick=()=>{
    const request= new XMLHttpRequest()
    request.open('GET','/3.html')
    request.onreadystatechange=()=>{
        if(request.readyState===4 && request.status===200){
            const div = document.createElement('div')
            div.innerHTML=request.response
            document.body.appendChild(div)
        }alert('下载失败呢')
    }
    request.send()
}

* 用AJAX加载XML,并获取其节点内容

//server.js
else if(path === '/4.xml'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
    response.write(fs.readFileSync('public/4.xml'))
    response.end()
  }
//main.js 内容
getXML.onclick=()=>{
    const request= new XMLHttpRequest()
    request.open('GET','/4.xml')
    request.onreadystatechange=()=>{
        if(request.readyState===4 && request.status===200){
              const dom= request.responseXML
              const text=dom.getElementsByTagName('warning')[0].textContent
              console.log(text.trim())
        }alert('下载失败呢')
    }
    request.send()
}

* 用AJAX加载JSON,并将其转为对象

//server.js
else if(path === '/5.json'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(fs.readFileSync('public/5.json'))
    response.end()
  }
//main.js 内容
getJson.onclick=()=>{
    const request= new XMLHttpRequest()
    request.open('GET','/1.css')
    request.onreadystatechange=()=>{
        if(request.readyState===4 && request.status===200){
            const object = JSON.parse(request.response)
            myName.innerHTML=object.name
        }alert('下载失败呢')
    }
    request.send()
}

* 可选:用AJAX模拟分页操作

ajax-1's People

Contributors

kailoveq avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.