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);

no-jquery 03 Ajax的更多相关文章

  1. jQuery的ajax使用

    一:jQuery.ajax语法基础 jQuery.ajax([options]) 概述:通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $. ...

  2. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  3. jQuery笔记(六)jQuery之Ajax

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  4. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  5. 【原创经验分享】JQuery(Ajax)调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  6. jQuery版AJAX简易封装

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...

  7. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  8. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  9. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  10. 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

随机推荐

  1. C#一维数组

    数组:相同数据类型的元素按照一定的顺序进行排列生成的集合(一组数据)一维数组:int [] array=new int[5];int[] array = new int[] {1,2,3,4,5 }; ...

  2. android学习————项目导入常见错误整理(转载)

    详细请访问http://4789781.blog.51cto.com/4779781/1031107

  3. 【QT】自己生成ui加入工程

    在三个月前 我就在纠结 C++ GUI Qt 4编程这本书中2.3节 快速设计对话框这一段. 按照书上的做没有办法生成能够成功运行的程序. 这两天又折腾了好久,终于成功了. 注意事项: 1. 我之前装 ...

  4. asp.net 后台获取input的值

    前台:<input id="test" value="" runat="server" /> 只要架上runat="s ...

  5. 打开Genesis设置单位为mm

    打开Genesis界面: 点击Configuration: 可看到只要设置get_def_units的值即可: 打开C:\genesis\sys\config配置文件,在最后一行加入:get_def_ ...

  6. c语言if语句

    #include<stdio.h>#include<windows.h>#include <limits.h>#include <math.h>int ...

  7. C语言中一个替换 strcpy的极好的方法

    在C语言中有个方法:strcpy() 使用时经常容易内存申请不足,或是没有申请内存导致,复制的时候报错,我新写了一个方法,弥补这个缺陷 char *strcpy1(char *strDes, char ...

  8. gcc创建和使用静态库、动态库

    http://www.cnblogs.com/dyllove98/archive/2013/06/25/3155599.html 目录树结构: test/include/hello.h #ifdef ...

  9. jdbc连接oracle数据库

    /*** 通过改变配置文件来连接不同数据库*/package com.xykj.jdbc; import static org.junit.Assert.*; import java.io.Input ...

  10. C#学习笔记----栈与堆的知识

    http://my.oschina.net/lichaoqiang/blog/291906 当我们对.NET Framework的一些基本面了解之后,实际上,还是很有必要了解一些更底层的知识.比如.N ...