AJAX和html的混合使用 以及解决前端跨域问题的两种方法

<script>
    //初始化对象
    var ajax_=new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
    //初始化设置请求的方式和url
    ajax_.open('get','./art_data.json',true);
    //发送请求
    ajax_.send();
     //4.事件绑定 处理服务端返回的结果
      //on when 当..时候 
      //readystate 是xhr对象中的属性 0 1 2 3 4
      //change 改变的时候触发 在4的时候做出修改
    ajax_.onreadystatechange=function(){
        if(ajax_.readyState==4){//readystate 是xhr对象中的属性 0 1 2 3 4 我们只在状态码为4的时候做出操作
            if(ajax_.status==200){//判断是否成功 2xx 都是成功
                /*xhr.status >= 200 && xhr.status < 300*/ //判断可以写这个
                //1xx 信息状态码 继续
                //2xx成功状态码
                //3xx重定向
                //4xx客户端错误
                //5xx服务端错误
                var res=JSON.parse(ajax_.responseText);
                //JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)。
                //解析前要保证数据是标准的JSON格式，否则会解析出错。
                //document（text/html）
                //如果指定好了responseType
                // responseText可以获取到html文本
                //response却可以获取到解析好的DOM对象。
                console.log(res);//打印一下看看效果 没啥用 输出的是个对象
                /* 渲染页面
                当页面加载成功之后，我们发起 ajax请求，获取列表数据
                在html 定义模板结构 ，利用script 标签，设置两个属性 type=text/html id=自定义
                在script标签里面使用模板语法 {{each 数组的变量名}}
                在请求的成功回调里面 调用 template(‘id名称’, 传递的数据)
                template方法返回的是 拼接好的html字符串
                找到容器，通过 html() 把内容渲染到页面*/
                var html_=template('first',{
                    a:res.list1,
                })//返回拼接好的字符串 找到id是传入的值的script标签
                //然后把拿到的数据值填进去 之后返回一个拼接好的字符串
                console.log(html_);//打印了一下拼接好的字符串 没啥用 
                container.innerHTML=html_;
                //当页面上仅且只有一个id时
                // dom不用另外写操作语句能够直接拿来用
                var htm_=template('second',{
                    b:res.list2,
                })
                container1.innerHTML=htm_;
               
            }
        }
    }
</script>

 用script标签支持跨域的性质 指定src属性 并在链接里指定回调函数

<script>
    var body_=document.getElementsByTagName('body')[0];
    function search_(){
        var value_=q.value;
        if(value_.trim()==''){
            return;
        }
        var script_=document.createElement('script');
        script_.src='http://suggest.taobao.com/sug?code=utf-8&q=' + value_ + '&callback=cb';
        body_.appendChild(script_);
        console.log(script_);
    }
    function cb(res) {
        console.log(res);
        // 数据渲染到页面
        var lis = ''
        for (var i = 0; i < res.result.length; i++) {
          lis += '<li>' + res.result[i][0] + '</li>'
        }
        console.log(lis)
        list.innerHTML = lis
      } 
</script>

在服务服务端添加请求头

//1.引入express
const { request, response } = require('express');
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/se',(request,response)=>{
  //设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')
  //设置响应
  response.send('hello')

})