（JS）Javascript之Ajax

标准浏览器创建Ajax

var xhr=new XMLHttpRequest();

早期IE创建Ajax

var xhr =new ActiveXObject(“Microsoft.XMLHTTP”);

准备发送
xhr.open():接受三个参数，第一个参数为提交方式，第二个参数表示请求地址，第三个参数表示异步或者同步，true为异步，false为同步。
由于浏览器问题，IE浏览器在传递参数时要用encodeURI()编码
如果是get请求，请求参数必须在URL中传递
如果为POST请求，请求参数应该在xhr.send()中，并且不需要转码
使用POST请求，需要设置响应头

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)

发送动作
xhr.send():如果提交方式为get，则需要添加null参数
指定回调函数

   xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){// 返回文本}}}

readyState状态表示
0（未初始化）对象已建立，但尚未初始化（尚未调用open方法）
1（初始化）对象已建立，尚未调用send方法
2（发送数据） send方法已调用，但是当前状态以及http头未知
3（数据传送中）已接收部分数据，因为响应以及http头不全，这时通过respenseBody和responseText获取部分数据会出现错误
4（完成）数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据
status状态表示
100 continue
101 Switching protocols
200 ok
201 Created
202 Accepted
203 Non-Authoritative Infomation
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Alliwed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
responseText:将响应信息作为字符串返回
responseXML:将响应信息格式化为Xml Document对象返回
XML创建

<?xml version=”1.0” edcoding=”utf-8”?>

用来传递少量数据
php开发xml
设置响应头,保证浏览器将相应内容解析为xml格式
header(“Content-Type:text/xml;”);
后面写xml内容
json文件
数据格式
{
“obj1”:”233”,
“obj2”:”333”
}
json和js对象的区别
1.json数据没有变量
2.json形式的数据结尾没有分号
3.json数据中的键必须用双引号包住
解析json
json.parse():将字符串解析为对象
json.stringify():将对象转换为字符串
eval():将字符串解析为对象。eval(“(”+data+”)”)
PHP开发json
json_encode():将数组转为json

Ajax跨域
同源策略
1.同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
2.同源策略主要为了保证浏览器的安全性
3.在同源策略下，浏览器不允许Ajax获取服务器数据
跨域解决方案
1. jsonp
2. document.domain+iframe
3. location.hash+iframe
4. window.name+iframe
5. window.postMessage
6. flash等第三方插件
jsonp获取数据

静态script标签的src属性进行跨域请求

<script type=”text/javascript” src=”URL”></script>

缺点

使用此方法不能使用异步加载
不方便参数传递

（JS）Javascript之Ajax相关推荐

[js点击]JavaScript之Ajax技术02
事件监听接口 XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数.该事件对所有情况作出响应. XMLHttpRequest第二版允许对更多的事件指定回 ...
[js点击]JavaScript之Ajax技术之02
事件监听接口 XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数.该事件对所有情况作出响应. XMLHttpRequest第二版允许对更多的事件指定回 ...
自学JavaScript第四天- JS 进阶：AJAX Promise Canvas
自学JavaScript第四天- JS 进阶:AJAX Promise Canvas AJAX 使用 XMLHttpRequest 使用 fetch() 方法处理 AJAX 数据安全限制跨域方案 ...
阿提拉公司 java_Atitit 文件上传架构设计实现机制解决方案实践java php c#.net js javascript c++ python...
Atitit 文件上传架构设计实现机制解决方案实践 java php c#.net js javascript c++ python 1 . 上传的几点要求 2 1 .1. 本地预览 2 1 ...
[转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
JS实现的ajax和同源策略
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参 ...
Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
JavaScript中ajax如何不刷新,JavaScript基于Ajax实现不刷新在网页上动态显示文件内容...
本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件aj ...
JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

（JS）Javascript之Ajax

（JS）Javascript之Ajax相关推荐

最新文章

热门文章