慕课网

精品课程 Ajax全接触

Ajax全接触

最热最新

mikedada

a域名去聲明一個方法,b域名去調用這個方法 script可以向不同頁面提交http請求；但是jsonp的方式只是針對get請求方式，不支持post請求 $.ajax({ type:"GET", url:"http://127.0.0.1:8080/ajaxdemo/service.php?number"+$("#keyword").val(), dataType:"jsonp", //由"json"改為"jsonp" jsonp:"callback", //增加此項，用於後台代碼編寫 success:function(data){ if(data.success){ $("#searchResult").html(data.msg); } else{ $("#searchResult").html("出現錯誤"); } }, error:function(er){ alert(er.status); } }); $jsonp = $_GET["callback"]; $result = '()'; 後端代碼改造 1、在search()函數中加入代碼$jsonp=$_GET["前端所取的jsonp的名字"] //這邊是callback 2、注意$result=$jsonp.'(……)' //括弧內是要顯示出來的訊息 jsonp連接是用點（.），並且裡面的值要用括號括起來

查看全部

0 采集收起来源：处理跨域方式--JSONP
2018-03-22
mikedada

處理跨域方式：1、代理 2、JSONP 3、XHR2 處理跨域的方法三——XHR2： 1.HTML5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其他的一些新功能 2.IE10以下的版本都不支持 3.在服務器端 header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:POST,GET');

查看全部

0 采集收起来源：处理跨域方式--XHR2
2016-06-01
mikedada

jQuery實現Ajax 1、在線引用（百度靜態資源公共庫） 2、jq實現Ajax（代碼如下，圖為各屬性解析） <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script> $(document).ready(function(){ $("#save").click(function(){ $.ajax({ type:"post", url:"service.php", dataType:"json", data:{ name:$("#staffName").val(), number:$("#staffNumber").val(), sex:$("#staffSex").val(), job:$("#staffJob").val() }, success:function(data){ if(data.success){$("#createResult").html(data.msg)} else{$("#createResult").html("error: " + data.msg) } }, error:function(jqXHR){ alert("error: "jqXHR.status); } }); }); });

查看全部

0 采集收起来源：jQuery中的AJAX
2018-03-22
mikedada

用jQuery實現Ajax type：類型，"POST"或"GET"，默認為"GET" url:發送請求的地址 data:是一個對象，連同請求發送到服務器 dataType:預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包MIME信息來智能判斷，般採用json格式，可以設置為"jsom" cuccess:是一個方法，請求成功後的回調函數。傳入返回後的數據，以及包含成功代碼的字符串 error:是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象

查看全部

0 采集收起来源：jQuery中的AJAX
2018-03-22
mikedada

3、修改後台文件, 來讀取JSON格式 document,getElementById("save").onclick = function(){ //發送Ajax查詢請求並處理 var request = new XMLHttpRequest(); request.open("POST","service.php"); //需將post請求提交的數據拼成URL參數 var data="name="+document.getElementById("staffName").value+"number"+document.getElementById("staffNumber").value+"sex="+document.getElemntById("staffSex").value+"job="+document.getElemntById("staffJob").value; request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//很重要 request.send(data); //監聽事件 request.onreadystatechange = function(){ if(request.readyState===4）{ if (request.status===200){ var data=JSON.parse(request.responseText); if(data.success){ document.getElementById("createResult").innerHTML=data.msg; }else{ document.getElementById("createResult").innerHTML="出現錯誤:"+data.msg; } }else{ alert("發生錯誤："+request.status); } } } } </script>

查看全部

0 采集收起来源：json解析、格式化和校验工具
2018-03-22
mikedada

1、json解析的方法有兩種：eval()和parse()方法 eval() 較危險，不光解析了字符串，還解析了js方法，無論何時用eval()都是非常危險的。-----不建議使用 JSON.parse()較好，會解析出錯誤。 //例子：首先定義了JSON字符串jsondata eval()方法： var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'； var jsonobj=veal('('+jsondata+')'); alert(jsonobj.staff[0].name); JSON.parse()方法： var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'； var jsonobj=JSON.parse(jsondata); alert(jsonobj.staff[0].name); 若把age後的70改成alert（123）；若用eval()方法，發現頁面是先彈出123，再彈出洪七；也就是說用eval不僅解析了字符串，還執行了JS里的方法但是用JSON.parse()解析字符串，發現會拋出一個錯誤。這說明用eval()不會看json是否合法，eval非常危險。所以盡量使用JSON.parse方法，來解析json里的字符串，而且還可以解析出json里的一些錯誤。 2、json校驗工具jsonlint

查看全部

1 采集收起来源：json解析、格式化和校验工具
2018-03-22
mikedada

JSON基本概念： JSON：javaScript對象表示法（JavaScript Object Notation） JSON是存儲和交換文本信息的語法，類似XML。它採用鍵值對的方式來組織，易於人們閱讀和編寫，同時也易於機器解析和生成 JSON是獨立於語言的，也就是說不管什麼語言，都可以解析json，只需要按照json的規則來就行 JSON鍵、值均要加雙引號「」; JSON和XML比較 JSON的長度和XML格式比起來很短小 JSON讀寫的速度更快 JSON可以使用JavaScript內建的方法直接進行解析，轉換成JavaScipt對象

查看全部

0 采集收起来源：json基本概念
2016-06-01
mikedada

客戶端實現核心是：創建XHR對象--併發送異步請求--接著監聽服務器的響應結果並呈現在頁面上 <script> document,getElementById("search").onclick = function(){ //發送Ajax查詢請求並處理 var request = new XMLHttpRequest(); request.open("GET","service.php?number="+document.getElementById("keyword").value); request.send(); //監聽事件 request.onreadystatechange = function(){ if(request.readyState===4 && request.status===200){ document.getElementById("searchResult").innerHTML=request.responseText; }else{ alert("發生錯誤："+request.status); } } 下面的POST請求方式，則： request.open("POST","service.php"); //需將post請求提交的數據拼成URL參數 var data="name="+document.getElementById("staffName").value+"number"+document.getElementById("staffNumber").value+"sex="+document.getElemntById("staffSex").value+"job="+document.getElemntById("staffJob").value; request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//很重要 request.send(data); ```` } } </script> 切記不要忘了在open和send之間設置 request.setRequestHeader("Content-Type","application/x-www-form-urlencode");

查看全部

0 采集收起来源：客户端实现
2018-03-22
mikedada

『fiddler工具』可看網站中的「Fiddler工具使用」 (http://www.imooc.com/learn/37)課程，後台測試接口工具 fiddler可用於調試服務器代碼（無需客戶端代碼）。 Fiddler是一個http協議調試代理工具，它能夠記錄並檢查所有你的電腦和互聯網之間的http通訊，設置斷點，查看所有的「進出」Fiddler的數據（指cookie,html,js,css等文件，這些都可以讓你胡亂修改的意思）。 Fiddler要比其他的網絡調試器要更加簡單，因為它不僅僅暴露http通訊還提供了一個用戶友好的格式。 fiddler可以監聽電腦上所有的HTTP請求(GET和POST等)監聽他們傳入的值和返回的值。後台測試接口工具。使用：右邊欄有compose都標籤頁。輸入剛才地址後excuse他。雙擊左欄的記錄。用post請求的時候要用到contentType：application/x-www-form-urlencodeed,告訴服務器是一個post請求，並且是寫在url裡面。在右下欄的requestbody寫上請求正文。 Content-Type:application/x-www-form-urlencoded

查看全部

0 采集收起来源：PHP服务端代码测试
2016-06-01
mikedada

PHP 服務器端實現 ·PHP腳本以<?php 開頭以?>結尾 ·PHP文件的默認文件擴展名是 .php ·PHP語句以分號結尾（;） <?php // 設置html頁面的編碼格式是utf-8 header("Content-Type:text/plain;charset=utf-8"); // header("Content-Type:application/json;charset=utf-8"); // header("Content-Type:text/xml;charset=utf-8"); // header("Content-Type:text/html;charset=utf-8"); // header("Content-Type:application/javascript;charset=utf-8"); //定義一個多維數組，包括員工的信息，每條員工信息為一個數組 $arr = array( array("name" => "tom", "number" => "101","sex" => "男","job" => "演員"), array("name" => "jack", "number" => "102","sex" => "男","job" => "經理"), array("name" => "mary", "number" => "103","sex" => "女","job" => "歌手"), ); //判斷如果是get請求，則進行搜索；如果是post請求，則進行新建數據 // $_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字 // $_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法 if($_SERVER["REQUEST_METHOD"] == "GET"){ //請求方法為GET方式，進行搜索 search(); }else if($_SERVER["REQUEST_METHOD"] == "POST"){ //請求方式為post方式，創建數據 create(); } // 通過員工編號搜索員工 function search(){ /*

查看全部

0 采集收起来源：Ajax-服务器端实现
2018-03-22
mikedada

這個例子會需要使用到PHP, 首先來介紹一下PHP PHP是一種創建動態交互性站點的服務端腳本語言。開源，免費。開發實例：WordPress、Facebook。入門簡單。 PHP能生成動態頁面內容, 創建、打開、讀取、寫入、刪除以及關閉服務器上的文件, 接收表單數據，發送並取回cookies, 添加，刪除，修改數據庫中的數據，限制用戶訪問網站中的某些頁面，解密、加密等等。 PHP兼容幾乎所有WEB服務器，支持幾乎所有數據庫運行PHP XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建 XAMPP 軟件站集成軟件包。這個軟件包原來的名字是 LAMPP，最新的幾個版本就改名為 XAMPP 了。它可以在Windows、Linux、Solaris、Mac OS X 等多種操作系統下安裝使用，支持多語言：英文、簡體中文、繁體中文、韓文、俄文、日文等。 https://www.apachefriends.org/download.html

查看全部

0 采集收起来源：Ajax-例子简介
2016-06-01
yixingqingkong 05:36

Json格式检验工具

查看全部

0 采集收起来源：json解析、格式化和校验工具
2016-06-01
yixingqingkong 02:24

Http请求过程

查看全部

0 采集收起来源：Ajax-HTTP请求
2016-06-01
yixingqingkong 01:37

Ie6不兼容xhr情况的处理

查看全部

0 采集收起来源：Ajax-XMLHttpRequest对象创建
2016-06-01
yixingqingkong 06:16

异步实现条件

查看全部

0 采集收起来源：Ajax-同步和异步
2016-06-01

首页上一页 451 452 453 454 455 456 457 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 只需要有基础的javascript语法知识，就可以很容易理解本课程哦

老师告诉你能学到什么？: 通过本课程的学习，您可以了解到Ajax概念、HTTP请求概念、PHP简单语法、JSON数据格式、Ajax的原生和jQuery实现、跨域等知识，只需要一些时间，看似复杂的知识点，其实都是纸老虎，会被你一捅就破。您不但会了解Ajax的使用，而且会清楚Ajax的原理，并举一反三。