慕课网

精品课程 Ajax全接触

Ajax全接触

最热最新

Sawako

我们在浏览器的控制台中演示一下这两种方式：首先定义一个json字符串： var jsondata='{"staff":[{"name":"红旗","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'; 然后定义一个jsonobj:我们通过eval的方式来解析这个字符串，怎么样来解析呢？通过如下方式来解析： var jsonobj=eval('('+jsondata+')'); 解析之后呢，可以alert其中的一个属性，staff是一个数组，所以我们取数组中的第一个数staff[0]的name，回车。就会弹出老“红旗”。说明这样已经解析成功了。接着用JSON.parse（）的方式来解析：var jsonobj=JSON.parse(jsondata); 回车。效果是一样的。再举个例子。假如把这个json字符串做一下改动： var jsondata='{"staff":[{"name":"红旗","age":alert(123)},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'; 使用eval方式页面上先弹出123，再弹出“红旗”，也就是说用eval不光解析了json字符串，而且还执行了json字符串中的一些方法。但是用JSON.parse()方法不会弹出任何信息，控制台抛出了一个错误。这个错误告诉我们，这个字符串是不合法的，语法错误。也就是用eval执行，它不回去看JSON字符串是否合法。而且JSON字符串中的一些js方法会直接执行。这是非常危险的，作为js程序员应该牢记。在代码中，无论何时，使用eval都是非常危险的。除非你能确定eval的参数是自己可以控制的是安全的，尤其是你用eval方法去执行第三方的数据，有可能会包含恶意代码。比如window.location转向了一个恶意的地址所以在实际中尽量使用JSON.parse()去解析json的字符串。而且使用JSON.parse()还会预告给我们一些json字符串中的一些语法错误。

查看全部

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

JSON语法规则：这是一个典型的JSON字符串，它首先是用大括号括起来————表示这是一个JSON对象，对象里面有个值对，这个值对的名称叫 staff，它的值是一个数组，这个数组又由许多小的JSON对象来组成，每个对象里面有两个属性，一个json字符串是由刚才的语法规则拼凑出来的。 { "staff":[ {"name":"红旗","age":70}, {"name":"郭靖","age":35}, {"name":"黄蓉","age":30} ] } json的格式如何在js中进行解析呢？一般在js中解析json，有两种方式： eval和JSON.parse 在代码中使用eval是很危险的！特别是用它执行第三方的JSON数据（其中可能含有恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

查看全部

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

客戶端實現(需结合案例) 核心是：創建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
Sawako

PHP服务端的代码已经写完了，但是这个代码写的对不对呢，能不能顺利的执行呢，我们需要进行一下测试这个所谓的测试可不是我们把客户端Ajax请求各个事件都给写完之后，来对它进行测试，我们需要在没有客户端的情况下，就对服务端的一些请求进行一些测试，这是怎么样来做到的呢？我们通过一个工具fiddler工具，这个工具可以监听整个电脑所有发出的 HTTP请求，可以监听它们传入的值，和相应回来的值，当然在这里边它还可以去模拟在百度上搜索fiddler就可以下载到，直接安装， (http://www.imooc.com/learn/37)有专门讲解fiddler的使用方法，大家在日常进行web开发的时候，有时候后台做好之后，总是等待依赖前台做好之后，可以去调试，其实完全没有必要我们只需要约定好接口，发送的报文和返回的报文，通过fiddler或者类似的工具，直接就可以进行调试了。不需要依赖前台是否完成

查看全部

0 采集收起来源：PHP服务端代码测试
2016-08-04
Sawako

例子會需要使用到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-08-04
Sawako

XMLHttpRequest 取得相应： .responseText: response of string type .responseXML:response of XML .status .statusText .getAllResponseHeader():get all response header .getResponseHeader():get specific header filed .readyState 属性：represent the status of responseText 0：请求初始化 open 还没有调用 1：服务器连接已经建立，open已经被调用 2：请求已经接受，也就是接收到头信息了 3：请求处理中，也就是接收到请求主体了 4：请求完成，相应就绪，也就是相应已经完成了监听方法(步骤)： 1. var request=new XMLHttpRequest(); 2. request.open("GET","get.php",true); 3. request.send(); 4. request.onreadystatechange=function(){ //相应完成，且请求成功 if(request.readyState===4&&request.status===200){ console.log(request.responseText) } }

查看全部

0 采集收起来源：Ajax-XMLHttpRequest取得响应
2018-03-22
Sawako

【疑惑】ajax里的send方法 ajax里的send方法参数类型是str，如果我想向后台发送一个json数据，是不是前端要先解析成【attr=json.attr&&...】的形式再传进send方法里？还是可以直接一个send(json)？还有，这个【key1=value1&&key2=value2&&....】是必须格式吗？能不能改为【key1=value1,key2=value2,.... 【解答】对于原生ajax的方法，send方法传递的参数必须是string类型，且参数之间必须要用&符号隔开。要想传递json格式数据，可以通过jquery的$.ajax()方法来实现。 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 设置dataType: "json"，就可以在data中传递json格式的参数

查看全部

0 采集收起来源：Ajax-XMLHttpRequest发送请求
2018-03-22
Sawako

XMLHttpRequest 方法： open(method,url,async) method:不区分大消息 url：绝对或相对地址 async:默认 false，异步 send(string) setRequestHeader() Example: request.open("GET","get.php",true) request.setRequestHeader("Content-type","application/x-form-unlencoded") request.send("name=Jack&sex=male");

查看全部

0 采集收起来源：Ajax-XMLHttpRequest发送请求
2018-03-22
Sawako 09:12

http状态码由3位数字构成

查看全部

0 采集收起来源：Ajax-HTTP请求
2016-08-04
Sawako 08:21

一个http响应一般由三部分组成

查看全部

0 采集收起来源：Ajax-HTTP请求
2016-08-04
Sawako 04:23

get请求与post请求

查看全部

0 采集收起来源：Ajax-HTTP请求
2016-08-04
Sawako 03:24

一个http请求一般由四部分组成

查看全部

0 采集收起来源：Ajax-HTTP请求
2016-08-04
Sawako 02:23

一个完整的http请求过程

查看全部

0 采集收起来源：Ajax-HTTP请求
2016-08-04
Sawako

XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象，异步的实现是利用了XMLHttpRequest对象，利用该对象进行异步操作，即后台可以和服务器交换数据，而不需要重新加载整个页面，只对网页部分更新。创建 XMLHttpRequest 对象的语法： var request=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： var request=new ActiveXObject("Microsoft.XMLHTTP"); 为了应对所有的现代浏览器，包括 IE5 和 IE6，检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ： var request; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari request=new XMLHttpRequest(); } else {// code for IE6, IE5 request=new ActiveXObject("Microsoft.XMLHTTP"); }

查看全部

0 采集收起来源：Ajax-XMLHttpRequest对象创建
2018-03-22
Sawako

Ajax三步驟： Asynchronous Javascript And XML 1、運用HTML和CSS實現頁面，表達信息； 2、運用XMLHttpRequest和web服務器進行數據的異步交換； 3、運用JavaScript操作DOM，實現動態局部刷新； 1.同步：就是用戶填寫完信息之後，全部提交給服務器，等待服務器的回應，是一次性全部的。 2.異步：當用戶填寫完一條信息之後，這條信息會自動向服務器提交，然後服務器響應客戶端，在此過程中，用戶依然在填寫表格的信息，即向服務器請求多次，節省了用戶的時間，提高了用戶的體驗。異步的實現是利用了XMLHttpRequest對象，利用該對象進行異步操作，即後台可以和服務器交換數據，而不需要重新加載整個頁面，只對網頁部分更新。 3.XMLhttpRequest對象來實現這一功能，也需要javascript來操作DOM實現局部的信息更新。

查看全部

0 采集收起来源：Ajax-同步和异步
2016-08-04

首页上一页 386 387 388 389 390 391 392 下一页尾页

0/150

提交

取消

该课程已下架

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

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