JS_Ajaxベース
18280 ワード
一:Ajax ajaxのフルネームはAsynchronous(非同期)JavaScript and XMLがページをリフレッシュせずにサーバから取得し、データをコミットするデータインタラクション方式である.
二:Ajax使用手順概括
三:Ajax使用手順分析:
四:同源策略
五:jsonp
jsonp深く勉強する
六:総合例:Ajaxを使用して天気情報をロードする練習:
オブジェクト式Ajaxパッケージ
ajax認知の深い学習
二: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使用手順分析:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxtitle>
<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);
}jsonp深く勉強する
六:総合例: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
<html>
<head>
<meta charset="UTF-8">
<title>weather_ajaxtitle>
<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);ajax認知の深い学習