利用Ajax方式GET请求服务端数据的几种方式

125 阅读2分钟

客户端:

// 基础ajax GET请求
    // var xhr=new XMLHttpRequest()
    // xhr.addEventListener("readystatechange",readyhandler)
    // xhr.open("GET","http://localhost:4010")
    //     xhr.send()
    // function readyhandler(){
    //     if(xhr.readyState===4 && xhr.status===200){
    //         console.log(xhr.response)
    //     }
    // }

    // 2.3方式
    //         var xhr=new XMLHttpRequest()
    // xhr.addEventListener("readystatechange",readyhandler)
    //                                 //addgoods:路由 // querystring字符串?a=1&b=2
    //                         // 通过访问不同的路由可以访问不同的接口,向同一地址发起多种请求
    // xhr.open("GET","http://localhost:4010/addgoods?a=1&b=2")
    //     xhr.send()
    // function readyhandler(){
    //     if(xhr.readyState===4 && xhr.status===200){
    //         console.log(xhr.response)
    //     }
    // }

    // var xhr=new XMLHttpRequest()
    // xhr.addEventListener("readystatechange",readyhandler)
    //                                 //addgoods:路由 // querystring字符串?a=1&b=2
    //                         // 通过访问不同的路由可以访问不同的接口,向同一地址发起多种请求
    // xhr.open("GET","http://localhost:4010/addgoods?a=1&b=2")
    //     xhr.send()
    // function readyhandler(){
    //     if(xhr.readyState===4 && xhr.status===200){
    //         console.log(xhr.response)
    //     }
    // }

服务端:

// 1.基础的相应GET请求 // var http=require("http") // http.createServer((req,res)=>{ // // 设置响应头 // res.writeHead(200,{ // "Content-Type":"text/html;charset-utf-8", // "Access-Control-Allow-Origin":"*" // }) // // 相应数据 // res.end("aaa") // }).listen(4010)

// 2.对发送的GET请求 获取值a=1&b=2 // var http=require("http") // http.createServer((req,res)=>{ // // 打印请求url的querystring字符串 /?a=1&b=2 // console.log(req.url) // // 拿到切割后的第一项 a=1&b=2 // var parame=req.url.split("?")[1] // console.log(parame) // // 设置响应头 // res.writeHead(200,{ // "Content-Type":"text/html;charset-utf-8", // // 跨域服务 // "Access-Control-Allow-Origin":"*" // }) // // 相应数据 // res.end("aaa") // }).listen(4010)

// 3.GET请求将路由和值解构赋值 { a: 1, b: 2 } 路由存入另一个变量 // var http=require("http") // http.createServer((req,res)=>{ // // 打印请求url的querystring字符串 /?a=1&b=2 // console.log(req.url) // // 解构赋值 路由和参数
// var [router,param]=req.url.split("?") // // 下一步将参数解析成对象使用 // param=param.split("&").reduce((v,t)=>{ // var arr=t.split("=") // //1.不全面:有可能不是一个数值 v[arr[0]]=arr[1]
// v[arr[0]]=isNaN(arr[1])?arr[1]:Number(arr[1]) // return v // },{}) // console.log(param) // // addgoods?a=1&b=2"将会变成 { a: 1, b: 2 } 路由存入另一个变量

//     // 设置响应头
// res.writeHead(200,{
// "Content-Type":"text/html;charset-utf-8",
// // 跨域服务
// "Access-Control-Allow-Origin":"*"
// })
//     // 相应数据
// res.end("aaa")
// }).listen(4010)

// 以上方式过于复杂

// GET的querystring方法 // var http=require("http") // // 利用node自带的querystring方式 // var querystring=require("querystring") // http.createServer((req,res)=>{ // // 打印请求url的querystring字符串 /?a=1&b=2 // console.log(req.url)

//     var [router,param]=req.url.split("?")
//     // 利用querystring对字符串进行解析
//     param=querystring.parse(param)
//     console.log(param)     //{ a: '1', b: '2' }实现的结果和上个方法一样
//     param=querystring.stringify(param)//将对象转换成字符串
//     console.log(param)   //a=1&b=2
//     // 设置响应头
// res.writeHead(200,{
// "Content-Type":"text/html;charset-utf-8",
// // 跨域服务
// "Access-Control-Allow-Origin":"*"
// })
//     // 相应数据
// res.end("aaa")
// }).listen(4010)