AJAX（完结)

程序源⠀

已于 2023-07-10 14:35:23 修改

阅读量40

点赞数

分类专栏： AJAX 文章标签： ajax

于 2023-07-10 14:19:40 首次发布

本文链接：https://blog.csdn.net/weixin_73609038/article/details/131019750

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.AJAX发送post请求

改变一下发送内容与get请求区别一下。

app.post('/server', (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');

    //  设置响应体
    response.send("Hello AJAX POST");
});

其他部分与上一篇文章中Ajax发送get请求设置基本一致，把请求类型从get改成post就可以了。

xhr.open('post','http://127.0.0.1:8000/server');

启动服务后打开页面，鼠标移动到框内可以成功显示内容

2.post设置请求体

xhr.send('a=100&b=200&c=300');

3.设置请求头信息

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

请求报文中添加了自定义请求头的时候会报错。

如果要发自定义请求头的话：

把post改成all

4. 服务端响应json数据

 const result = document.getElementById('result');
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState ===4){
                    if(xhr.status>=200 && xhr.status <300){
                        console.log(xhr.response);
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }

格式修改如下：