每天10个前端知识点：ajax & jsonp

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

嗯！正式准备一日一更了，大家做好准备。

1. Ajax前导

(1) XMLHttpRequest

*兼容：除IE6
ie6 -> 报错

(2) readyState就绪状态

0 uninitialized ajax 对象创建成功
1 loading 打开连接(已经建立连接)
2 loaded 发送数据
3 interactive 下载内容
4 complete 完成

(3) HTTP状态码

重点

200 ok
304 not modified
403 Forbidden
404 Not found
405 Not allowed
414 Request-URI Too Long
500 Internal Server Error
502 Bad Gateway

附：全部状态码
'100': 'Continue',
'101': 'Switching Protocols',
'102': 'Processing',
'200': 'OK',
'201': 'Created',
'202': 'Accepted',
'203': 'Non-Authoritative Information',
'204': 'No Content',
'205': 'Reset Content',
'206': 'Partial Content',
'207': 'Multi-Status',
'208': 'Already Reported',
'226': 'IM Used',
'300': 'Multiple Choices',
'301': 'Moved Permanently',
'302': 'Found',
'303': 'See Other',
'304': 'Not Modified',
'305': 'Use Proxy',
'307': 'Temporary Redirect',
'308': 'Permanent Redirect',
'400': 'Bad Request',
'401': 'Unauthorized',
'402': 'Payment Required',
'403': 'Forbidden',
'404': 'Not Found',
'405': 'Method Not Allowed',
'406': 'Not Acceptable',
'407': 'Proxy Authentication Required',
'408': 'Request Timeout',
'409': 'Conflict',
'410': 'Gone',
'411': 'Length Required',
'412': 'Precondition Failed',
'413': 'Payload Too Large',
'414': 'URI Too Long',
'415': 'Unsupported Media Type',
'416': 'Range Not Satisfiable',
'417': 'Expectation Failed',
'418': 'I'm a teapot',
'421': 'Misdirected Request',

'422': 'Unprocessable Entity',
'423': 'Locked',
'424': 'Failed Dependency',
'425': 'Unordered Collection',
'426': 'Upgrade Required',
'428': 'Precondition Required',
'429': 'Too Many Requests',
'431': 'Request Header Fields Too Large',
'451': 'Unavailable For Legal Reasons',
'500': 'Internal Server Error',
'501': 'Not Implemented',
'502': 'Bad Gateway',
'503': 'Service Unavailable',
'504': 'Gateway Timeout',
'505': 'HTTP Version Not Supported',
'506': 'Variant Also Negotiates',
'507': 'Insufficient Storage',
'508': 'Loop Detected',
'509': 'Bandwidth Limit Exceeded',
'510': 'Not Extended',
'511': 'Network Authentication Required'

(4) ajax提交方式

GET 数据在open提交
载体：url
POST 数据在send提交
载体：请求头(setRequestHeader)

2. Ajax

原生编写ajax.js

3. Ajax服务器相关

oAjax.getAllResponseHeaders(); 获取ajax服务全部信息
oAjax.getResponseHeader('xxx'); 获取ajax服务器相关信息

4. Ajax2.0事件

oAjax.onload 替代oAjax.onreadystatechange
oAjax.onerror 发生错误(网络层级的错误才会触发)
oAjax.onprogress 上传进度(ev.loaded/ev.total)
oAjax.onabort 中断

5. 关于锚点hash

应用：刷新保留分页页码

cookie只有4k左右，此处应用hash保留分页页码

6. Ajax跨域

同源策略：Ajax只能同域名下取数据

js跨域请求方式

jsonp(json with padding)
修改document.domain跨子域
window.name
H5 window.postMessage(IE6 7不支持)
CORS(跨域资源共享) 设置header: Access-Control-Allow-Origin
nginx反向代理

JavaScript跨域总结与解决办法

7. jsonp前导

jsonp原理
动态创建script标签，利用script:src可以跨域的属性跨域
不需要服务器环境

jsonp接口测试网址

8. jsonp

原生编写jsonp.js

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故