ajax

63 阅读1分钟

ajax

AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

    //ajax 请求的基础
    let ajax = new XMLHttpRequest() //创建对象
    ajax.open('GET','url','true') //设置请求方式 get/post 请求连接 是否异步
    ajax.onreadystatechange = () => { //监听请求状态
        if (ajax.readyState === 4) {
            // 0: 请求未初始化
            // 1: 服务器连接已建立
            // 2: 请求已接收
            // 3: 请求处理中
            // 4: 请求已完成,且响应已就绪

            if (ajax.status === 200) {
                //请求成功后的处理
                // let data =JSON.parse(ajax.response)
                // console.log(data.pageData.resultData);
                let data = JSON.parse(ajax.response);
                data1 = data.pageData.resultData; //需要的数据名
                data1.forEach(r => {
                    let item = document.createElement("div")
                    item.innerHTML = r.name;

                    let img = document.createElement('img')
                    img.src = r.verticalPic;
                    img.style.width = '100px'
                    img.style.height = '200px'
                    item.appendChild(img)
                    container.appendChild(item)
                })
            }
        }
    }
    ajax.send(); //发起请求

封装ajax

  function get(url,success) {
        let ajax = new XMLHttpRequest()
        ajax.open('GET',url,'true') 
        ajax.onreadystatechange = () => {
            if (ajax.readyState === 4) {
                if (ajax.status === 200) {
                    let data = JSON.parse(ajax.response);
                    success(data);  
                }
            }
        }
        ajax.send(); 
    }
    get('url',function (data){
         console.log(data);
    })

标签是一个内联框架,即用来在当前HTML页面中嵌入另一个文档的