JS_Ajax基础
一:Ajax
ajax 的全称是Asynchronous(异步) JavaScript and XML
在不刷新页面的情况下从服务器获取，提交数据的一种数据交互方式;
二：Ajax使用步骤概括
//1：创建Ajax对象
var xhr;
//浏览器兼容问题解决
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//或者 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft XMLHTTP');
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send();
//4:接收服务器返回数据
xhr.onreadysatechange=function(){
if(xhr.readySates==4&&xhr.status==200)
console.log(xhr.responsetXML)
}
三：Ajax使用步骤分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script>
//网络数据请求工具 ，数据类型一般有：(json|xml)
//如何拿：创建对象+配置方法open+send请求发送给服务器
//监听数据状态， onreadystatechange 判断状态，服务器默认get请求|若用POST请求出错500，请求方式由服务器来定，
//一:创建Ajax对象
// 1.1定义变量，用来保存创建出的对象，(XMLHttpRequest);
var xhr;
//1.2：根据浏览器支持标准。创建对象。
//判断当前浏览器是否具备XMLHttpRequest
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
//IE5|6|7 使用ActiveXobject创建
//Ajax组件放在ActiveXObject组件库中，需传入'Miscrosoft.XMLHTTTP'才能返回Ajax组件
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//二：配置Ajax请求地址
// ======================post请求=====================================
//配置请求信息
//open三个参数()
//1:设置请求方式get|post
//2:设置请求数据的接口地址
//3:设置请求是否是异步请求(异步请求:请求发送后，不等待请求数据，先执行其他任务，当数据达到本地在处理) 默认是：true为异步
// xhr.open('post','index.html',true);
// post请求参数问题，把post请求所需的参数，放到send()中
// 若其参数有中文字符，将其转码为unicode并拼接如下
// xhr.send('user=lemon&password=23');
// xhr.send('user='+encodeURI('中文')+'password=23');
//POST请求参数中有中文，都要使用encodeURI进行转码
//POST参数放置问题 需要将参数丢掷send中
//GET参数send参数为null send() 为了所有服务器能正确识别，传值为null
//===========================get请求=============================
//若有参数拼接到url中，多个数据之间使用&&连接
//缓存规避
//get请求中：若每次请求为同一个接口，浏览器将从缓存中取数据，而不是服务器；如果服务器中接口数据内容改变，则就拿不到新数据。
所以在请求接口后拼接一个随机数参数，这样浏览器每次拿到接口在缓存中都找不到这个接口对应数据，这样就会从服务器中读取数据，
而服务器端并没有开设接收随机数参数的字段，所以get发送过来的随机数将被服务器丢弃，只能返回处理的接口数据；
// xhr.open('get','myX.ML.xml'+Math.random(),true);
xhr.open('get','myJSON.json',true);
//三：发送数据
xhr.send(null);//严谨写法null
//四:监听数据传输情况
//如何判断数据有没有到达：
//readySate值改变执行，
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
//只有当readyState的值是4且status值是200，服务器数据才算发送到本地
//数据请求成功
//若数据是xml格式，数据返回保存到responseXML属性中，否则responseText;
//请求数据是xml传输的时候，responseText把这些数据转化为字符串，但responseXML会把这些数据当成xml文档对象，再解析成字符串更方便；
//若数据请求为json格式，respinseText会把数据转换成json字符串,responseXML并不会受到这些数据为null
console.log(xhr.responseText);//json 收
console.log(xhr.responseXML);//xml 收
}
}
</script>
</head>
<body>
</body>
</html>
四：同源策略
所谓同源是指域名（主机名或者IP地址）、端口、协议相同。
不同的客户端脚本（JavaScript、ActionScript）在没明确授权的情况下，不能读取对方的资源。
同源策略：保护用户策略，比如：在建行中设置的信息，若想拿到缓存信息， 只能用同源网页进行访问。
Ajax只能访问同源接口
同源策略限制范围：
1：本地缓存Cookie/localStorage/indexDB数据
2：不能互相访问dom节点 | 通过第一个js代码操作另一个html代码，同一家厂商生产，可以自定义修改，无安全隐患。
3：ajax请求不能发送 | 保护自己公司数据
同源判断：
URL 协议：主机名：端口 三者相同，才称之为同源；
结果 原因
http://store.company.com/dir2/other.html 成功
http://store.company.com/dir/inner/another.html 成功
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同
http://news.company.com/dir/other.html 失败 主机名不同五：jsonp
在Ajax打破同源的限制
跨域
//jsonp；利用script标签请求外服务器中数据，从而绕开同源策略对AJAX请求数据限制
//一：创建javascript标签
var script = document.createElement('script');
script.type="text/javascript";
script.src="http://10.0.159.198/news.php?callback=foo";//传回调函数
document.getElementsByTagName('body')[0].appendChild(script);//写进文档流
//二：写回调函数
function foo(s){
alert(s);
}六：综合示例：使用Ajax加载天气信息练习:
//Ajax.js
//ajax封装
//传入参数：请求方式|请求接口地址|请求参数|请求成功回调函数|请求失败回调函数
function createAjax(method, url, data, successFun, failFun) {
//1:根据浏览器支持情况创建
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2:判断请求方式类型
if(method.toUpperCase() == "GET") {
//2.1请求为get时，配置请求参数，并发送
xhr.open('GET', url + "?" + data, true);
xhr.send(null);
} else if(method.toUpperCase() == "POST") {
xhr.open('POST', url, true);
xhr.send(data);
} else {
console.errr("error");
return;
}
//3：监听
xhr.onreadystatechange = function() {
if(xhr.readyState == "4" && xhr.status == "200") {
successFun(xhr.responseText);
} else if(xhr.readyState == "4") {
failFun('error');
}
}
}
//jsonp封装
function createJsonp(srcString){
//封装好的JSONP 只能对接GET服务器
var script = document.createElement("script");
script.type="text/javascript";
script.src=srcString;
document.getElementsByTagName("head")[0].appendChild(script);
}
//weather.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>weather_ajax</title>
<script type="text/javascript" src="Ajax.js"></script>
<script type="text/javascript">
var murl = 'http://wthrcdn.etouch.cn/weather_mini';
var data = "city=原阳";
//调用封装好的ajax;
createAjax('get', murl, data, successFun, failFun);
function successFun(d) {
console.log(d);
}
function failFun(d) {
console.log(d);
}
//调用封装好的jsonp
var strString="http://wthrcdn.etouch.cn/weather_mini?city=原阳&&callback=myfoo";
createJsonp(strString);
function myfoo(d){
console.log(d);
}
</script>
</head>
<body>
</body>
</html>对象式Ajax封装
//ajax.js
function ajaxFun(obj) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var upperMethod = obj.method.toUpperCase();
if(upperMethod == "GET") {
xhr.open("GET", obj.url + "?" + obj.data, true);
xhr.send(null);
} else if(upperMethod == "POST") {
xhr.open("POST", obj.url, true);
xhr.send(obj.data);
} else {
console.error("method error!");
return;
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
obj.successFun(xhr.responseText);
} else {
obj.failFun('error');
}
}
}
}//html中调用
var obj={
method:"GET",
url:"http://wthrcdn.etouch.cn/weather_mini",
data:"city=北京",
successFun:function(d){
console.log(d);
},
failFun:function(d){
console.log(d);
}
};
ajaxFun(obj);JS_Ajax基础的更多相关文章
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- .NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
随机推荐
- Servlet实现重定向的两种方式
使用Servlet实现请求重定向:两种方式 1. response.setStatus(302); response.setHeader("location", "/Re ...
- C++11 删除链表重复数值
#include <memory> #include <iostream> #include <chrono> #include <thread> us ...
- struts2 表单验证
http://www.blogjava.net/javagrass/archive/2011/11/21/364400.html
- 【Mysql】权限管理
mysql权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表. mysql权限表的验证过程为: 1.先从user表中的Host, ...
- [转贴]有关Angular 2.0的一切
对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...
- html5 上传图片.net实现
jQuery插件之ajaxFileUpload 搞了一夜,还没弄出来随copy了一篇博客... 一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来, ...
- Python动态生成变量
Python 也可以像javascript那样动态生成变量.我们看javascript的动态生成变量. var obj = {}; for (var i =0, len = 10; i < le ...
- Robot Framework-DatabaseLibrary数据库(MySql)
Robot Framework-Mac版本安装 Robot Framework-Windows版本安装 Robot Framework-工具简介及入门使用 Robot Framework-Databa ...
- Windows 8.1 应用再出发 (WinJS) - 几种新增控件（2）
上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...
- 学习WCF之——wcf程序的创建
这是我参考的主要资料——wcf学习之旅:http://www.cnblogs.com/artech/archive/2007/02/26/656901.html 首先,如博客上介绍的一样,创建空白的项 ...