ajax

ajax：Asynchronous javascript and xml (異步javascript和xml)。

ajax並不是一種新技術,而是已有技術的集合JavaScript是核心載體

ajax優勢:在不刷新網頁的情況下，能夠更新部分網頁的數據 提升用戶的體驗

能夠實現異步工作

  Ajax不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術

 

①創建XHLHTTPRequest對象:要分為(低版本)IE 和非IE兩種

IE 瀏覽器(IE7之前)

var xhr =new ActiveXObject('Msxml2.XMLHTTP');

非IE瀏覽器（chrome、firefox、opare、safair、搜狗等，包括IE7+之后):

var xhr = new XMLHttpRequest();

②XMLHttpRequest對象有了，可以發送Ajax請求了。

open(var1, var2, var3): 准備Ajax請求

參數:var1: 請求方式  get/post

  var2: 請求的后端程序地址 ，后端可以是 php  jsp  asp Python等等

  var3: 異步(true)/同步(false)，可選參數，默認為true

③:send(var): 發送Ajax請求

參數var: 分為兩種情況。 如果是get請求，則填寫null。 如果是post請求，則填寫要發送到后端的數據

④接收后端返回的結果

④//onreadystatechange事件:  readyState的值每次發生變化都會觸發該事件。

xhr.onreadystatechange = function(){
　　if (xhr.readyState==4){
　　//如果等於4的話，說明已經完全接收到返回數據，並且可以在瀏覽器中使用了，
　　//以字符串形式接收后端的返回值
　　alert（'xhr.responseText'）//PHP程序最終會被解析為一段字符串，responseText接收的就是這段字符串
　　}
}

 

① 創建XMLHTTPRequest對象//1. 創建XMLHttpRequest對象

function getXhr () {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //IE7+ 和 非IE 中都有 XMLHttpRequest對象
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    return xmlhttp;
}
var xhr = getXhr();
④//onreadystatechange事件:  readyState的值每次發生變化都會觸發該事件。
xhr.onreadystatechange = function(){
if (xhr.readyState==4){ //如果等於4的話，說明已經完全接收到返回數據，並且可以在瀏覽器中使用了，
//以字符串形式接收后端的返回值
alert（'xhr.responseText'）//PHP程序最終會被解析為一段字符串，responseText接收的就是這段字符串
}
}
②准備ajax請求
open('get','路徑');
③發送ajax請求
send(null);

JSON.parse(字符串)

JSON.parse()就是將請求過來的json 數據 轉換成數組或者對象

　　簡單理解就是： 把引號去掉

var a = '[{"id":10001,"name":"zs","age":20},{"id":10002,"name":"ls","age":21},{"id":10003,"name":"ww","age":19}]'
JSON.paese(a)
這樣a的結果就會是： [{"id":10001,"name":"zs","age":20},{"id":10002,"name":"ls","age":21},{"id":10003,"name":"ww","age":19}]

JSON.stringify() 這個與JSON.parse相反 就是將數組或者對象轉換成字符串

　　簡單理解就是：加上單引號

 

 

 

 

什么是緩存?

瀏覽器的請求需要從服務器獲得許多 css、img、js 等相關的文件，如果每次請求都把相關的資源文件加載一次，對 帶寬、服務器資源、用戶等待時間 都有嚴重的損耗。如果瀏覽器將css、img、js等文件在第一次請求成功后就保存在本機上，以后的每次請求就在本機獲得相關的資源文件，那么就可以明顯地加快用戶的訪問速度，同時可以節省各種資源(帶寬、服務器資源、用戶等待時間)。

 

產生緩存的情況

Ajax在發送的數據成功后，會把請求的URL和返回的響應結果保存在緩存內，當下一次調用Ajax發送相同的請求時，它會直接從緩存中把數據取出來，這是為了提高頁面的響應速度和用戶體驗。當前這要求兩次請求URL完全相同，包括參數。這個時候，瀏覽器就不會與服務器交互。

 

get方法會產生緩存

 

 

解決緩存的方法:

解決方法有兩種: 1) 前端方案: 在open准備ajax請求時， 為請求的地址增加隨機后綴。相當於每次請求都是新的地址

xhr.open(‘get’,’地址?’ + Math.random())

 2) 后端方案: 后端程序設置不允許緩存的頭信息，php程序固定使用如下3句即可(3句最好是全部加上)。

header('cache-controller:no-cache');

header('Pragam:no-cache');

header('Expires:-1');

 

解決緩存方案：解決這個問題最有效的辦法是禁止頁面緩存，有以下幾種處理方：

 

1、在ajax發送請求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2、在服務端加 header(“Cache-Control: no-cache, must-revalidate”);

3、在ajax發送請求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

4、在 Ajax 的 URL 參數后加上 "?fresh=" + Math.random(); //當然這里參數 fresh 可以任意取了

5、第五種方法和第四種類似，在 URL 參數后加上 "?timestamp=" + new Date().getTime();

6、用POST替代GET：不推薦不建議使用：​

1、ajax不支持瀏覽器back按鈕。　　

2、安全問題 AJAX暴露了與服務器交互的細節。　　

3、對搜索引擎的支持比較弱。　　

4、破壞了程序的異常機制。　　

5、不容易調試。

 

 

同步/異步的概念

同步: ==順序執行(自上而下執行)== 第一步---> 第二步 ---> 第三步 ....

異步: 甲在完成一系列工作時，自己完成主工作。將一些分支工作交給乙，甲此時一直在完成自己的工作，並等待乙完成的結果。乙完成后將結果返回給甲。

同步:

同步的思想是：所有的操作都做完，才返回給用戶。這樣用戶在線等待的時間太長，給用戶一種卡死了的感覺（就是系統遷移中，點擊了遷移，界面就不動了，但是程序還在執行，卡死了的感覺）。這種情況下，用戶不能關閉界面，如果關閉了，即遷移程序就中斷了。

異步:

將用戶請求放入消息隊列，並反饋給用戶，系統遷移程序已經啟動，你可以關閉瀏覽器了。然后程序再慢慢地去寫入數據庫去。這就是異步。但是用戶沒有卡死的感覺，會告訴你，你的請求系統已經響應了。你可以關閉界面了。

同步，是所有的操作都做完，才返回給用戶結果。即寫完數據庫之后，在響應用戶，用戶體驗不好。

異步，不用等所有操作等做完，就響應用戶請求。即先響應用戶請求，然后慢慢去寫數據庫，用戶體驗較好。

 

 

使用join模板引擎需要引入 template-web.js文件

 

timeout 和ontimeout

timeout： 請求超時設置。屬性，用來設置等待響應時長，如果超過指定時長，則會觸發ontimeout事件

​ xhr.timeout = 3000; // 設置等待時長為3秒

ontimeout： 事件，用來設置超過等待時長后的動作

​ xhr.ontimeout = function () {

​ alert('請求超時');

​ }

 

FormData表單對象(只能使用post方法 發送請求)

先獲取form表單的DOM對象

var fm = document.getElementById(form表單)

實例化FormData對象 並將獲取到的DOM對象作為參數傳入

var fd =new FormData(fm)

發送ajax請求是，要將FormData作為參數傳入send方法中

 

表單使用提交按鈕，一定是<input type=”button”>以為其他有默認跳轉行為

使用FormData一定要使用post方法發送請求，將fd作為參數傳入send方法

 

name:上傳文件名

type:上傳文件類型

tmp_name:上傳文件臨時存放路徑

error:錯誤碼 如果等於0 說明沒有錯誤

size:上傳文件的大小move_uploaded_file($_FILES['f']['tmp_name'], './' . $_FILES['f']['name'])

 

 

文件上傳的核心事件 xhr.upload.onprogress 該事件大約每100ms觸發一次

該事件對象中包含了  loaded(已上傳大小)和total(總大小)

xhr.upload.onprogress = function (evt){

計算百分比 保留小數點后面 2 位

percent = (evt.loaded / evt.total).toFixed(2);

}

toFixed(值)保留小數點后面幾位數

 

 

jQuery提供了4中ajax方法: $.get() $.post() $.ajax() $.getJSON()

前三種是常用

 

$.get(var1, var2, var3, var4);

參數1: 請求的后台程序的地址 參數

2: 要發送到后台程序的數據，json對象/js對象（推薦）或者字符串 參數

3: 當readyState==4時的觸發函數，該函數中有一個參數，就是后台程序返回的數據 參數

4: 設置返回數據的類型: text(默認) json xml

 

$post函數的用法和$.get一模一樣，只是發送請求方式變為post

$.post(var1, var2, var3 , var4); //最標准的寫法

  參數1: 請求的后台程序的地址 參數

2: 要發送到后台程序的數據，json對象/js對象（推薦） 或者 字符串 參數

3: 當readyState=4時的觸發函數，該函數中有一個參數，就是后台程序返回的數據 參數

4: 設置返回數據的類型: text(默認) json xml

 

$.ajax使用JS對象來配置ajax請求

必須配置項：

url: 要請求的后台程序地址

data: 要發送到后台程序的數據 (建議使用json對象格式)

type: 請求類型 post和get 兩種

dataType: 返回值類型 text(默認) 、 json 、xml 、 jsonp(跨域使用)

success: 成功完成ajax觸發的事件，回調函數，其參數是后端程序的返回數據

 

其他配置項：

cache: 是否進行緩存(true/fasle)，如果設置type為get，一般設置該項為false(不緩存)。

async: 同步/異步設置，true(異步、默認) false(同步)。

timeout: 超時設置，多少ms之后扔未接收到后端返回數據，則結束本次請求。--- 進入

error方法中 error: 請求失敗時的回調函數，該函數有三個參數。參數1是xhr 對象，參數2是錯誤信息（錯誤信息通常是 "null", "timeout", "error", "notmodified" 和 "parsererror"），參數3是異常對象。

complete: Ajax完成時的回調函數。

beforeSend: 發送Ajax之前執行的回調函數。

contentType: 頭信息設置，使用FormData對象時設置該值為false，其他情況會自動設置，不需要手動設置。

processData: 處理數據方式，使用FormData對象時設置該值為false，其他情況會自動設置，不需要手動設置。

注意: ==contentType和processData只有在使用FormData對象時設置，其余情況均不用設置==

 

 

 

 

虛擬主機

虛擬主機,也叫”網站空間”,就是把一台允許在互聯網上的物理服務器划分成多個”虛擬”服務器,每一個虛擬服務器都能獨立運行的一個網站

1) 修改apache配置文件(httpd.conf)，引入apache的虛擬主機配置文件(httpd-vhost.conf)

  去掉該句前的 # 號

 

 

2) 修改虛擬主機配置文件d:\phpstudy\Apache\conf\extra\httpd-vhosts.conf

 

 

3) 修改host文件 (使用管理員權限修改)c:/windows/system32/drivers/etc/hosts

 

 

==重啟Apche服務器==‘

注意： www.study.com  指向 d:/phpstudy/WWW/study 目錄

 

ajax跨域

ajax跨域簡單來說,就是網站A去調用網站B的數據

 

但是Ajax跨域存在一個問題 --- 瀏覽器的同源策略，該策略會阻止ajax跨域訪問同源策略（Same origin policy）是一種約定，它是瀏覽器的一種安全功能。 同源: 同協議，同域名，同端口； 不同源則為跨域

 

 

只要看到 ’Access-Control-Allow-Origin‘ 就說明，ajax請求被同源策略限制了。

 

 

說明：請求正常發出，數據也正常返回，但是瀏覽器不讓使用。

 

 

解決跨域問題有三種方法:

服務器代理

cors

josnp

 

代理實現跨域

PHP有一個函數 file-get_contents 該函數能夠獲取到其他網站的數據

 

 

file_get_contents(' http://www.baidu.com/index.html');

 

 

 

cors跨域:跨域資源共享

cors: 跨域資源共享。 同源策略是瀏覽器的策略。但是如果服務器允許其他網站的頁面進行跨域訪問，那么瀏覽器就不會對返回的數據進行限制了。

核心方法: 在服務器端(PHP文件中)聲明不用進行同源限制

如果設置為 * 則是所有外部網站都可以獲取數據header('Access-Control-Allow-origin: *   ');

如果只允許某個網站訪問並獲取數據只需把該網站寫入即可。如 : header('Access-Control-Allow-origin: 允許的網站');

 

jsonp跨域

JSONP(JSON with Padding) : 是一種解決ajax跨域訪問的方案。

核心思想: 瀏覽器雖然有同源策略，但是 src 和 href 兩個屬性卻可以跨域訪問。 可以利用這一“漏洞”發送ajax請求。

 

$.ajax方法跨域操作----jsonp方法

$.post $.get $.ajax都能發送跨域請求。但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式

 

核心:

必須設置請求類型為get ---  type: ‘get’

必須設置dataType為jsonp --- dataType: ‘jsonp’

必須額外設置一個jsonp參數，該參數值可以是任何英文字符串，常用callback。==該函數的作用是在前端自動創建一個以該字符串為名稱的函數名==

核心:  jsonp: 'callback';

  作用從前端傳遞一個函數名到后端。

  前端會使用該函數名定義函數，   后端需要接收該函數名返回一個函數調用的字符串