Ajax完全细致亚博教程(一)

Ajax完全细致亚博教程(一)

thinkphp与laravel优点有哪些

ThinkPHP优点:高级模型、视图模型、关联模型、模板引擎、缓存机制,等等。Laravel优点:可继承的模板,简化view的开发和管理;渲染速度更快;ORM操作数据库;引入了门面,依赖注入,Ioc模式,以及各种各样的设计模式等。

Ajax 简介

Ajax 由 HTML、JavaScript™ 手艺、DHTML 和 DOM 构成,这一卓越的要领可以将愚笨的 Web 界面转化成交互性的 Ajax 应用程序。它是一种构建网站的壮大要领。

Ajax 尝试竖立桌面应用程序的功用和交互性,与不断更新的 Web 应用程序之间的桥梁。可以运用像桌面应用程序中常见的动态用户界面和美丽的控件,不过是在 Web 应用程序中。

Ajax 应用程序所用到的基础手艺:

1、HTML 用于竖立 Web 表单并肯定应用程序其他部份运用的字段。

2、JavaScript 代码是运转 Ajax应用程序的中心代码,协助革新与服务器应用程序的通讯。

3、DHTML 或 Dynamic HTML,用于动态更新表单。我们将运用div、span 和其他动态 HTML 元夙来标记 HTML。

4、文档对象模子 DOM 用于(经由历程 JavaScript 代码)处置惩罚HTML 构造和(某些情况下)服务器返回的 XML。

Ajax 的定义

Ajax= Asynchronous JavaScript and XML(以及 DHTML 等)Asynchronous异步JS和XML。

XMLHttpRequest这是一个 JavaScript 对象; 是处置惩罚一切服务器通讯的对象,建立该对象很简朴,如清单 1 所示。

清单 1. 建立新的 XMLHttpRequest 对象

<script language="javascript" type="text/javascript">
    var xmlHttp = new XMLHttpRequest();</script>

经由历程 XMLHttpRequest 对象与服务器举行对话的是 JavaScript 手艺。这不是平常的应用程序流,这恰恰是 Ajax的壮大功用的泉源。

Ajax 基础上就是把 JavaScript 手艺和 XMLHttpRequest 对象放在 Web 表单和服务器之间。

取得 XMLHttpRequest 的句柄后,运用 JavaScript 代码完成以下使命:

1、猎取表单数据:JavaScript 代码很轻易从 HTML 表单中抽取数据并发送到服务器。

2、修正表单上的数据:更新表单也很简朴,从设置字段值到敏捷替代图象。

3、剖析 HTML 和 XML:运用 JavaScript 代码支配 DOM(请参阅 下一节),处置惩罚 HTML 表单服务器返回的 XML数据的构造

关于前两点,须要异常熟习 getElementById() 要领,如 清单 2 所示。

清单 2. 用 JavaScript 代码捕获和设置字段值

//捕获字段值:
// 取得字段"phone"的值并用其建立一个变量phone
var phone = document.getElementById("phone").value;
//设置字段值:
// 从response的数组中取得值并将其写到标签中
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

DOM的功用

当须要在 JavaScript 代码和服务器之间通报 XML 和转变 HTML 表单的时刻,我们再深入研究 DOM。

猎取 Request 对象

XMLHttpRequest 是 Ajax 应用程序的中心.

var xmlhttp;
if (window.XMLHttpRequest)
  {// 从 IE7+, Firefox, Chrome, Opera, Safari 中取得XMLHttpRequest对象
  xmlhttp=new XMLHttpRequest();
  }
else
  {//从 IE6, IE5 中取得XMLHttpRequest对象
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

清单 4. 以支撑多种浏览器的体式格局建立 XMLHttpRequest 对象

thinkphp使用方法是什么

配置data文件夹:设置runtime文件夹。||设置upload,存放上传图片、上传文件。||设置static,存放jquery.js、bootstrap。||定义模板文件路径,方便调用模板下的css、js、images。

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp &amp;& typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

这段代码的中心分为三步:

1、竖立一个变量 xmlHttp 来援用行将建立的 XMLHttpRequest 对象。

2、尝试在 Microsoft 浏览器中建立该对象:
1)尝试运用 Msxml2.XMLHTTP 对象建立它。
假如失利,再尝试 Microsoft.XMLHTTP 对象。

3、假如依然没有竖立 xmlHttp,则以非 Microsoft 的体式格局建立该对象。 末了,xmlHttp 应当援用一个有用的XMLHttpRequest 对象,不管运转什么样的浏览器。

Ajax 的请求/相应

与服务器上的 Web 应用程序打交道的是 JavaScript 手艺,而不是直接提交给谁人应用程序的 HTML 表单。
发出请求
怎样运用XMLHttpRequest 对象?
起首–须要一个可以挪用JavaScript 要领 的Web 页面 。
接下来就是在一切 Ajax 应用程序中基础都相同的流程:

1、从 Web 表单中猎取须要的数据。
2、竖立要衔接的 URL。
3、翻开到服务器的衔接。
4、设置服务器在完成后要运转的函数。
5、发送请求。

清单 5 中的示例 Ajax 要领就是依据这个递次构造的:

清单 5. 发出 Ajax 请求

function callServer() {
  // 取得city和state的值
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // 当它们的值任一个不存在的时刻完毕JS
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // 建立衔接的URL对象
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // 翻开一个衔接服务器的衔接
  xmlHttp.open("GET", url, true);

  // 设置一个要领,当请求返回的时刻挪用这个要领
  xmlHttp.onreadystatechange = updatePage;
  //xmlhttp.onreadystatechange=function()
  //{
  //    if (xmlhttp.readyState==4 && xmlhttp.status==200)
  //    {
  //   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  //    }
  //}

  // 发作链接
  xmlHttp.send(null);
}

最先的代码运用基础 JavaScript 代码猎取几个表单字段的值。 然后设置一个 PHP 剧本作为链接的目的。 要注意剧本 URL 的指定体式格局,city 和 state(来自表单)运用简朴的 GET 参数附加在 URL 以后。 末了一个参数假如设为 true,那末将请求一个异步衔接(这就是 Ajax 的由来)。 假如运用 false,那末代码发出请求后将守候服务器返回的相应。 假如设为 true,当服务器在背景处置惩罚请求的时刻用户依然可以运用表单(以至挪用其他 JavaScript 要领)。
onreadystatechange属性可以通知服务器在运转完成后做什么。由于代码没有守候服务器,必需让服务器晓得怎么做以便您能作出相应。
在这个示例中,假如服务器处置惩罚完了请求,一个特别的名为 updatePage() 的要领将被触发。
末了,运用值 null 挪用send()。由于已经在请求 URL 中添加了要发送给服务器的数据(city 和state),所以请求中不须要发送任何数据。如许就发出了请求,服务器依据您的请求事情。

处置惩罚相应

1.什么也不要做,直到 xmlHttp.readyState 属性的值即是 4。

2.服务器将把相应填充到 xmlHttp.responseText 属性中。

个中的第一点,即停当状况;
第二点,运用 xmlHttp.responseText 属性取得服务器的相应,清单 6中的示例要领可供服务器依据 清单 5 中发送的数据挪用。

清单 6. 处置惩罚服务器相应

function updatePage() {
  if (xmlHttp.readyState == 4) {    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

它守候服务器挪用,假如是停当状况,则运用服务器返回的值(这里是用户输入的都市和州的 ZIP 编码)设置另一个表单字段的值。
一旦服务器返回 ZIP 编码,updatePage() 要领就用都市/州的 ZIP 编码设置谁人字段的值,用户就可以改写该值。如许做有两个缘由:

坚持例子简朴,申明有时刻能够愿望用户可以修正服务器返回的数据。

要记着这两点,它们关于好的用户界面设计来讲很主要。

衔接 Web 表单

一个 JavaScript 要领捕获用户输入表单的信息并将其发送到服务器,另一个 JavaScript 要领监听和处置惩罚相应,并在相应返回时设置字段的值。一切这些实际上都依赖于挪用 第一个 JavaScript 要领,它启动了全部历程。
应用 JavaScript 手艺更新表单。

清单 7. 启动一个 Ajax 历程

<form>
    <p>City: <input type="text" name="city" id="city" size="25" 
           onChange="callServer();" /></p>
    <p>State: <input type="text" name="state" id="state" size="25" 
           onChange="callServer();" /></p>
    <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

完毕语

鄙人一期文章中,您将控制:

1、XMLHttpRequest 对象
2、学会怎样处置惩罚 JavaScript 和服务器的通讯
3、怎样运用 HTML 表单以及怎样取得 DOM 句柄。

更多相干题目请接见亚博映像:Ajax视频教程

本文系列文章:

Ajax完全细致教程(二)

Ajax完全细致教程(三)

thinkphp3和5的差别是什么

新版:目录和文件名采用‘小写+下划线’,并且以小写字母开头;类库、函数文件统一以.php为后缀;类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致(包括大小写);类名和类文件名保持一致,并统一采用驼峰法命名(首字母大写)。

Up Next:

thinkphp中的mvc代表什么

thinkphp中的mvc代表什么