沙滩星空的博客沙滩星空的博客

javascript使用XMLHttpRequest发送GET和POST请求

使用XMLHttpRequest

  主要分三步:

    第一步:创建需要的对象,这里主要用到的是XMLHttpRequest,注意需要考虑早期的IE;

    第二步:连接和发送;

    第三步:接收;

如果为同步请求,httpRequest.open()第三个参数为false

httpRequest.open('GET', 'url', false);

默认为true,表示要不要异步执行操作。如果值为false,send()方法直到收到答复前不会返回。如果true,已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true,否则将引发异常。

注意:主线程上的同步请求很容易破坏用户体验,应该避免;实际上,许多浏览器已完全弃用主线程上的同步XHR支持。在 Worker中允许同步请求

GET请求:

var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
        httpRequest.open('GET', 'url', true);//第二步:打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步:发送请求  将请求参数写在URL中

        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//获取到json字符串,还需解析
                console.log(json);
            }
        };

POST请求:

var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)
httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中

httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
        var json = httpRequest.responseText;//获取到服务端返回的数据
        console.log(json);
    }
};

post方式发送json

var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接/***发送json格式文件必须设置请求头 ;如下 - */
httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)var obj = { name: 'zhansgan', age: 18 };
httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中

httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
        var json = httpRequest.responseText;//获取到服务端返回的数据
        console.log(json);
    }
};

js发送get 、post请求的方法简介 https://www.cnblogs.com/Im-Victor/p/9405974.html
使用 XMLHttpRequest https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open

未经允许不得转载:沙滩星空的博客 » javascript使用XMLHttpRequest发送GET和POST请求

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址