ajax随笔

ajax四部曲

1. 新建对象
2. open配置请求参数
3. send发送请求
4. 事件监听

		//ajax执行环境必须是在服务器环境下
        //新建ajax对象
        var http = new XMLHttpRequest();
        // POST/GET
        // 接口地址
        // 异步
        http.open("GET", "http://localhost:8787/getNews?page=1&count=5", true)

		//发送请求
        http.send();
        
        //执行完毕时触发事件
        //readystatechange 一样的，还能判断进展状态
        http.addEventListener("load", function () {  
            // console.log(1)
            //返回的数据
            console.log(http.responseText)
        })  

ajax封装方法

		function ajax(ops) {
            var http = new XMLHttpRequest();
            let type = ops.type || "get";  //如果没有定义请求类型，默认为get请求
            if (type.toLowerCase() == "get") {
                http.open("GET", ops.url + "?" + obj2str(ops.data), true)
                http.send();
            } else {
                http.open("POST", ops.url, true);
                //设置请求头
                http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //发送请求
                http.send(obj2str(ops.data));//将地址 后面部分放入这儿，不带问号
            }
            //执行完毕时触发事件
            http.addEventListener("readystatechange", function () {

                //状态值  
                // 0：请求未初始化（代理被创建，但尚未调用send()方法）
                // 1：服务器连接已建立（send()方法已调用）
                // 2：请求已接收（send()方法已调用，并且头部和状态已获得）
                // 3：请求处理中（下载中，responseText属性已经包含部分数据）
                // 4：请求已完成（下载操作已完成）
                // console.log(http.readyState);
                if (http.readyState == 4 && http.status == 200) {
                    ops.success && ops.success(http.responseText)
                }
                //返回的数据
                // console.log(http.responseText)
            })
        }

        //调用ajax
        ajax({
            url: "...",
            data: {
                page: 1,
                count: 5
            },
            success: function (res) {       //回调函数
                console.log(res)
            },
            type: "get"
        })

        //将obj转为 name=value&name2=value2
        let obj2str = (data) => {
            let arr = [];
            for (var k in data) {
                arr.push(item + '=' + data[item]);
            }
            return arr.join("&");
        }

ajax创建服务器及使用（利用koa框架）

1. 安装nodejs
2. 添加模块依赖：
   方式一：直接拷贝package.json，终端运行 npm i ，会自动添加模块依赖
   方式二：创建描述文件 npm i ，再自己装：npm i koa koa-router koa-static -S-D
3. node 文件名 ： 启动服务端命令
4. nodemon 文件名：这种方式启动服务端，每次修改不用再运行命令
   安装nodemon： npm i nodemon -g
5. 通过配置的端口号，在浏览器访问，查看是否成功

创建服务器
引入各个模块并对请求地址等进行设置

const Koa = require("koa");
const static = require("koa-static");//用于读取自己的html文件
const Router = require("koa-router");
let app = new Koa();
let router = new Router();
app.use(static(__dirname + "/static"));//获取自己的html文件
router.all("/", ctx => {
    ctx.body = "看来你想请求8787端口";
})
router.all("/getNews", ctx => {
    let arr = [
        { title: "标题一", content: "内容一" }, 
        { title: "标题二", content: "内容二" }, 
        { title: "标题三", content: "内容三" }, 
        { title: "标题四", content: "内容四" }, 
        { title: "标题五", content: "内容五" }, 
        { title: "标题六", content: "内容六" }, 
        { title: "标题七", content: "内容七" }, 
        { title: "标题八", content: "内容八" }, 
        { title: "标题九", content: "内容九" }, 
        { title: "标题十", content: "内容十" }];
    let page = ctx.query.page || 1;   //如果没获取到页数，就取1
    let count = ctx.query.count || 5;  //如果没获取到每页条数，就取5
    let newArr = arr.slice( (page-1)*count, count*page);
    ctx.body = {data:newArr,totalPage:Math.ceil(arr.length/count)};
})

app.use(router.routes());

app.listen(8787);  //端口号设置

自己的页面放在static文件下，因为上面是这么配置的
    <script>
            // 将obj转成 name=val&name2=val2
            let obj2str = (data)=>{
                let arr = [];
                for(let item in data){
                    // age=12
                    arr.push(item+'='+data[item]);
                }
                // age=12&sex=1
                return arr.join('&');
            }
        
            function ajax(ops){
                // ajax执行环境必须是在服务器环境下
                // 创建一个ajax对象
                console.log(obj2str(ops.data));
                let http = new XMLHttpRequest();
                let type = ops.type || 'get';
                console.log(type)
                if(type.toLowerCase() == 'get'){
                    // GET/POST
                    // open(请求形式,接口地址,是否异步)
                    // 异步/同步
                    http.open('GET',ops.url+'?'+obj2str(ops.data),true);
                    // 发送请求
                    http.send();
                }else{
                    http.open('POST',ops.url+'?'+obj2str(ops.data),true);
               http.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                    http.send();
                }

                // 执行完毕时
                http.addEventListener('readystatechange',function(){

                    console.log(http.readyState)
                    console.log(http.status)
                    if(http.readyState==4 && http.status==200){
                        ops.success&&ops.success(http.responseText,1)
                    }
                    // 返回的数据
                    // console.log(http.responseText)
                })
            }

            // 调用ajax
            ajax({
                url:'http://localhost:8787/getNews',
                type:'post',
                data:{
                    page:1,
                    count:3
                },
                success:function(res){
                    console.log(res)
                }
            });

ajax跨域

1. 需要配置两个服务器环境
2. 三种方式实现跨域：
   1、jsonp
   2、cors
   3、开代理（需要再安装模块依赖 npm i koa-server-http-proxy）
3. 这里我就用代理来实现，现在代理最常用

自己的html文件

	button class="btn">点击发送ajax</button>
    <script>

        // 服务端代理  实现跨域
        // 原理：通过同源服务器 ，访问跨域服务器
        // 需要在同源服务器上导入require("koa-server-http-proxy")用于转发请求实现跨域

        let btn = document.querySelector(".btn");
        btn.addEventListener("click", () => {
            //发送请求
            let xhr = new XMLHttpRequest();
            xhr.open("get", "/api/myproxy", true); //api开头的地址，后面代理会处理
            
            xhr.addEventListener("load", () => {
                console.log(xhr.responseText);
            })
            xhr.send();
        })
    </script>

创建服务器
本台服务器端口号为3000

const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
let app = new Koa();
let router = new Router();
let koaServerhttpProxy = require("koa-server-http-proxy");

app.use(static(__dirname + "/static"))
//代理解释：一旦有 api 开头的请求，会转发到指定端口target
app.use(koaServerhttpProxy('/api', {
    target: 'http://localhost:4000', //跳转到服务器为4000的端口号（跨域）
    pathRewrite: { '^/api': '' },  //把地址中的/api转为空
    changeOrigin: true
}))

router.get("/test", ctx => { //已经跨域，请求另一个服务器的地址
    ctx.body = "hello3000";
});
router.get("/myproxy", ctx => { //已经跨域，请求另一个服务器的地址
    //http、axios发送
    ctx.body = {
        info: "3000端口",
        status: 1
    }
})
app.use(router.routes());
app.listen(3000);

创建服务器
本台服务器端口号为4000

const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
let app = new Koa();
let router = new Router();

app.use(static(__dirname + "/static"))
router.get("/test", ctx => {
    ctx.body = "hello4000";
});
router.get("/myproxy", ctx => {
    ctx.body = [{
        tittle: "有点东西1",
        id: 1
    }, {
        tittle: "优点东西2",
        id: 2
    }]
})
app.use(router.routes());
app.listen(4000);