no-jquery 03 Ajax

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30483697

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/jinkspeng/p/4478223.html

本文详细介绍了使用Ajax进行HTTP请求的方法，包括GET、POST、PUT请求，文件上传，JSON数据的发送与接收，跨域请求（CORS）及JSONP等技术细节。

Ajax Requests

GETting

var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI('myservice/username?id=some-unique-id'));
xhr.onload = function() {
    if (xhr.status === 200) {
        alert('User\'s name is ' + xhr.responseText);
    }
    else {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send();

POSTing

var newName = 'John Smith',
    xhr = new XMLHttpRequest();

xhr.open('POST',
encodeURI('myservice/username?id=some-unique-id'));
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    if (xhr.status === 200 && xhr.responseText !== newName) {
        alert('Something went wrong.  Name is now ' + xhr.responseText);
    }
    else if (xhr.status !== 200) {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send(encodeURI('name=' + newName));

URL Encoding

function param(object) {
    var encodedString = '';
    for (var prop in object) {
        if (object.hasOwnProperty(prop)) {
            if (encodedString.length > 0) {
                encodedString += '&';
            }
            encodedString += encodeURI(prop + '=' + object[prop]);
        }
    }
    return encodedString;
}

Sending and Receiving JSON

var xhr = new XMLHttpRequest();
xhr.open('PUT', 'myservice/user/1234');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    if (xhr.status === 200) {
        var userInfo = JSON.parse(xhr.responseText);
    }
};
xhr.send(JSON.stringify({
    name: 'John Smith',
    age: 34
}));

Uploading Files

//First, multipart encoded:

var formData = new FormData(),
    file = document.getElementById('test-input').files[0],
    xhr = new XMLHttpRequest();

formData.append('file', file);
xhr.open('POST', 'myserver/uploads');
xhr.send(formData);

//And now, let's send the file as the payload of the request:
var file = document.getElementById('test-input').files[0],
    xhr = new XMLHttpRequest();

xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

CORS

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://someotherdomain.com');
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.send('sometext');

JSONP

window.myJsonpCallback = function(data) {
    // handle requested data from server
};

var scriptEl = document.createElement('script');
scriptEl.setAttribute('src',
    'http://jsonp-aware-endpoint.com/user?callback=myJsonpCallback&id=123');
document.body.appendChild(scriptEl);

转载于:https://www.cnblogs.com/jinkspeng/p/4478223.html