澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

中文PDF清晰扫描版,我的思考

传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。

传统的HTML页面中连动下拉框采用了两种方法:
1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。

的博客:网站?XML?我的思考

Ajax的基本概念及使用

内容简介:

List

<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; c
harset=gb2312">
<script LANGUAGE="javascript">
<!--
var onecount;
onecount=0;

1、我用HTML进行设计

同步&异步

  • 同步:必须等待前面的任务完成,才能继续后面的任务;
  • 异步:不受当前主要任务的影响。
  • 举个例子:
  • 同步:我们在银行排队时,只有等到你了,才能够去处理业务;
  • 异步:我们在排队的时候,玩王者农药的先后顺序是各不相关的。

《PHP 5.3入门经典》全面透彻讲解PHP5.3所有知识点为您编写卓越Web程序奠定坚实基础。作为当今风靡全球的开源web编程语言之一,PHP堪称理想的服务器端脚本语言,它将基于HTML的网页连接到后端数据库来呈现动态内容。有了这个编程利器,就可以创建简单的表单邮件脚本、Web论坛应用程序、博客平台乃至复杂的内容管理系统。《PHP5.3入门经典》介绍PHP语言,并引导读者使用PHP语言编写功能强大的Web应用程序。

2)javascript 直接读取数据库,取数据库中的记录写入javascript中,然后和第一种方法一样,调用javascript函数循环写入下拉框中。此方法将数据源与javascript分开,但,公开数据库的连接,从安全角度说,没有多少实用价值。

subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");

      曾经我以为我蛮特别的,我喜欢用记事本来写很简单很简单的HTML。而且,我看的关于网页的第一个教程也就是教你<h1>啊这些标签的教程。相信那个著名的教程,很多人都有看过。只是很多看过了之后不一定会自己去手写这些代码,只是知道frontpage这样的工具背后的原理就好了。
但是时间久了还是觉得蛮累的。因为我写代码的时候毕竟是要靠自己的大脑去想象最终的外观会是什么,所以有的时候还是蛮想去用Dreamweaver这样的工具。也难怪那些所见即所得的工具会有那么多用户了,因为写的时候就直接看到了最终的呈现。手写代码的时候,如果遇到了重要的内容,我会用<font>这样的标签特意去改变一下外观。遇到了列表的内容的时候会用<ul>啊这样的标签,产生1234的标号,或者一个个的圆点。其实有的时候觉得html挺简单的,因为标签的数量很有限嘛。

异步更新网站

  • 当我们访问一个普通的网站时,当浏览器加载完:HTML、CSS、JS以后网站的内容就固定了。如果网站内容发生更改必须刷新页面才能够看到更新的内容。

  • 网站内容更新:常规的网站内容更新,必须通过刷新才能显示新内容。

  • 异步更新:

  • 我们在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时之前的页面并没有刷新。

作者简介:

我的方法是将下拉框中的数据放在XML文件中,用javascript读XML文件,取得下拉框中的内容。

onecount=6;

2、我使用HTML的表格

Ajax概念

  • 在不刷新页面的情况下,“偷偷”的发送数据给服务器,通过发出http请求。

  • 在没有学习Ajax以前,如果想要发出http请求(发出请求报文):

  • 页面会刷新;

  • 后果:如果网速很慢,刷新页面势必会重新加载;造成不必要的时间浪费;

  • 一些极少量的信息想要提交给服务器,也没有必要刷新整个页面。

  • 写法:是通过js在浏览器端帮我们预定义的一个异步对象来完成的。

  • 事例:当我们正在排队的时候,可以通过手机去干一些其他的事情。

  • 在浏览器中,我们也能够不刷新页面,通过ajax的方式去获取一些新的内容,类似网页有微博、朋友圈、邮箱等。

  • 单词解释:Asynchronous Javascript And XML(异步JavaScript和XML),他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest

Matt Doyle,年幼时就在慈母的教诲下开始学习计算机技术。在获得计算机科学学士学位后,曾从事系统管理、计算机培训、软件开发、图形设计和网站构建等工作,后与他人于1977年共同创办了ELATED公司。

HTML 文件如下:

function changelocation(locationid)
{
document.myform.smalllocation.length = 0;

       HTML的表格是很有意思的东西。当你遇到了要列表的东西的时候,如果是没有表头而且是一列的时候,你可能会用<ol>这样的单列。如果是两列,可能就会用<table>了。而且用起来也不是很复杂,<tr>就是开一行,<td>就是一列。当然还有很多种排法了。基本的也就是分方格,然后放东西。表格有趣的地方是,你设计form这样的东西的时候也会用表格。虽然每个单元格的内容之间没有什么意义上的关联了。不像你的成绩单列表那样,数学成绩一列,语文成绩一列。在form中使用表格仅仅是为了最终的版式上的问题。利用单元格把form中的元件进行定位。后来表格的排版作用用到了整个页面的排版,而且越用越复杂,表格加表格。直接导致了我这样手写代码的人无法去修改,去编写这样的页面。一度让我很伤心,觉得这个世界被Dreamweaver这样的工具的使用者掌握者,因为只有利用所见即所得才能够去设计这样外观丰富的主页。

XMLHttpRequest

  • ajax使用的依旧是HTTP请求,那么让我们来回忆一下一个完整的HTTP请求需要什么:
  • 请求的网址,方法get/post;
  • 提交请求内容数据、请求主体等;
  • 接收响应回来的内容。

澳门新浦京娱乐场网站 1

在HTML中调用XML数据

var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option('====所有地区====','');
for (i=0;i <onecount; i )
{
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length]
= new Option(subcat[i][0], subcat[i][2]);
}
}

3、我还用过css

写Ajax的步骤
  • 先写html页面,通过某种条件发出ajax请求;
  • 写在php页面,处理发过来的请求;
  • 再回到浏览器异步对象的onreadystatechange事件中,去处理返回的内容。

PHP 5.3入门经典 中文PDF清晰扫描版下载

类型子类

}

       css是让我激动的东西。我承认这点。我曾经梦想,我写网页的时候只要把每块内容指定好了class。以后要改变网页的外观就只需要把css换调就可以了。而且css可以是内含的也可以是外部用<link>链接的。我要把网站改版把css的内容换一下就可以了。而且css还有@import,利用它我还可以在网站的每个目录下都放一个style.css,然后利用@import包含站点的样式表。这样每个网页就不用..这样的目录选择符来选择在父目录中的样式表了。这个特性着实让我很兴奋。我的梦想越来越清晰,就是有朝一日,我写的网页能够很轻易的更改外观,而且编写的时候再也不用自己去使用<font>这样的标签了。

发送Ajax请求,使用的是js
  • 五步使用法:
  • 创建异步对象:var ajaxObj = new XMLHttpRequest();
  • 使用open方法设置请求的参数:
    • ajaxObj.open('get','xxx.php');
    • 参数1为请求的方法,参数2为请求的url;
  • 发送请求:(发送请求报文)
    • ajaxObj.send();
  • 注册事件:(服务器返回响应报文)
    • 状态改变时就会调用,如果要在数据完成请求回来的时候才调用,我们需要手动的写一些判断的逻辑;
ajaxObj.onreadystatechange = function (){
        //为了保证数据完整回来,我们一般会判断两个值
        if (ajaxObj.readyState==4 && ajaxObj.status==200){
            //在注册事件中,获取返回的内容,并修改页面的显示
        }
}
  • 在注册的事件中,获取返回的内容,并修改页面的显示。
![](https://upload-images.jianshu.io/upload_images/2646493-710f1b07030e4c3a.png)

浏览器与服务器的关系
  • 示例代码:GET(get的数据,直接在请求的url中添加即可)
  • html中的代码:
<body>
    <input type="text" class="user">
    <button>发送请求</button>
    <script>
        document.querySelector("button").onclick = function () {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();

            //2.设置method、url等参数
            var userName = document.querySelector(".user").value;
            xhr.open("get","03-XMLHttpRequest.php?name=" userName);

            //3.发送数据
            xhr.send();

            //4.绑定事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200){
                    //5.在绑定事件中获取返回的数据,显示页面
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
  • php中的代码:
<?php
        echo $_GET['name'].",欢迎你";
?>
  • 示例代码:POST
  • 有两点不同
    1.发送的数据写在send方法中;
    2.必须要在open和send之间添加setRequestHeader("Content-type","application/x-www-form-urlencoded");
  • html中的代码:
<body>
    <input type="text" class="user">
    <button>发送请求</button>
    <script>
        document.querySelector("button").onclick = function () {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();

            //2.设置method、url等参数
            xhr.open("POST","03-XMLHttpRequest.php");

            //如果使用post发送数据,必须要添加如下内容,修改发送给服务器的请求报文的内容。form表单使用post发送数据不需要设置,因为form表单默认会进行转换
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //3.发送请求,发送请求的数据写在send方法中
            //格式 name=jiang & age=18
            var userName = document.querySelector(".user").value;
            xhr.send("name=" userName);

            //4.绑定事件
            xhr.onreadystatechange = function () {
                //5.在绑定事件里获取数据,展示页面
                if (xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
  • php中的代码:
<?php
        echo $_POST["name"].",你好";
?>
  • 实际开发中,get和post的选取:
    由后台程序员以文档或者口头形式告知;
    如果不考虑提交文件,那么get/post的作用基本一致,只是写法不同;
    自己写demo的时候,随便选取哪一个使用。

百度网盘免费下载地址:http://pan.baidu.com/s/1jGFl4IM

account.xml 如下:

//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>

4、javascript也是让人好奇的东西

练习:异步切换明星头像

------------------------------------------分割线------------------------------------------

Not Available www.7say.com www.xj139.com www.xjzxsy.com www.sina.com www.sohu.com www.blueidea.com

2)javascript 直接读取数据库,取数据库中的记录写入javascript中,然后和第一种方法一样,调用javascript函数循环写入下拉框中。此方法将数据源与javascript分开,但,公开数据库的连接,从安全角度说,没有多少实用价值。

       我相信网络发展还不如现在这么发达的时候就开始设计网页的朋友,一定对于各式各样的javascript非常熟悉。比如跟随鼠标的星星,跑马灯之类的东西。javascript设计出来是为了实现客户端的一定交互性的。javascript之所以能够交互是因为,它能够通过DOM操纵你看到的html页面,而且能够通过html元素中的事件属性得到你的输入。因为javascript能够通过DOM把html的页面进行改变。这个性质其实也让我激动了好久。比如leoboard的最新帖子这样的信息,就是通过一个<script>的链接,链接到一个cgi上面,它产生的就是一段js脚本,通过document的函数写出一段html代码。也就是说,javascript能够"动态"的产生html代码。由于javascript的这个功能,我又开始做梦了。希望能够整个网站都是通过互相包含的javascript组成。我把我的内容都写在javascript的变量之中,然后通过一定规则组合通过DOM的函数把内容以一定的模板风格写入到最终的html输出之中。

XMLHttpRequest_API讲解

FTP地址:ftp://ftp1.linuxidc.com

我的方法是将下拉框中的数据放在XML文件中,用javascript读XML文件,取得下拉框中的内容。

5、再闻css

创建XMLHttpRequest对象(兼容性写法):

  • 新版本浏览器:
var xml=new XMLHttpRequest();
  • IE5和IE6:
var xml=new ActiveXObject("Microsoft.XMLHTTP");
  • 考虑兼容性创建Ajax对象
var request ;
if(XMLHttpRequest){
        // 新式浏览器写法
        request = new XMLHttpRequest();
}else{
        //IE5,IE6写法
        request = new ActiveXObject("Microsoft.XMLHTTP");
}

用户名:ftp1.linuxidc.com

HTML 文件如下:
<!-- myfile.html -->
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
var subclass_name="";
loadXML();
function loadXML(){
  xmlDoc.async="false";
  xmlDoc.load("account.xml");
  xmlObj=xmlDoc.documentElement;
  nodes = xmlDoc.documentElement.childNodes;
  document.frm.mainclass.options.length = 0;
  document.frm.subclass.options.length = 0;

       一开始听说css,也许那个时候还是css1的时代吧。只知道css能够设定一定元素的外观显示,比如字体啊,空白什么的。关于css的排版功能一概不知。第一次做css的梦的时候,其实就是因为要把html进行排版控制,不得不用很多的table这个原因破灭的。所以当我知道css的功能很强大,可以进行各种版面控制的时候,就又开始做梦了。把内容按照其性质放到一些<div class="...">这样的标签之中,用不同的css样式表,能够把这些div定位到页面的不同地方,而且显示也是不一样的。这样我就能够在写html的时候以任意的顺序来写,只管内容。而css会根据你对内容的描述(class是什么)把内容进行定位排版和显示。所以说,以前我知道的css只把元素的内容和显示分开了,但是元素的位置还是与在源代码中的位置相关。而现在知道的css,能够让元素只管自己的事情,告诉css自己是什么(class是什么),不用再考虑自己在文档中的位置了。这样不就实现了内容与表现分离了吗?不就是我等用记事本写网页的网页设计者追求的吗?

发送请求:

方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。<ul><li>method:请求的类型;GET 或 POST;</li><li>url:文件在服务器上的位置;</li><li>async:true(异步)或 false(同步)</li></ul>
send(string) 将请求发送到服务器。string:仅用于 POST 请求

密码:www.linuxidc.com

  for (i=0;i<xmlObj.childNodes.length;i ){
    labels=xmlObj.childNodes(i).getAttribute("display_name");
    values=xmlObj.childNodes(i).text;
    document.frm.mainclass.add(document.createElement("OPTION"));
    document.frm.mainclass.options[i].text=labels;
    document.frm.mainclass.options[i].value=values;
  }
}
</script>

6、内容与外观分离

POST请求注意点:

  • 如果想要像form表单提交数据那样使用POST请求,需要使用XMLHttpRequest对象setRequestHeader()方法来添加HTTP头。然后在send()方法中添加想要发送的数据:
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

在 2014年LinuxIDC.com3月PHP 5.3入门经典 中文PDF清晰扫描版

<script language="JavaScript" >
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;

       我相信这句话很多人都听说过,梦想过。我的梦从模糊,到清晰,一直都在想着有朝一日我能够只管把我要传达的内容写下来,让其他的人来给我排版给我定外观。It is a Dream。我们只从一个网页设计者的角度,而且是一个普通网页设计者的角度来谈这个问题。不要把什么中间件,应用服务器什么程序高手津津乐道的术语来压"我们"。为什么要把内容和外观分离我相信很多人都有自己的体会。我的体会很简单。当年自己手写html的时候,我对我的内容很有信心,我知道我要说什么,我有内容。但是我对于如何排版很没有信息,我想让别人,或者自己以后来把内容进行排版。但是事情是很让人失望的,我基本上只有两个对策。把内容的格式变得简单得不能再简单,只是html的最基本元素的线性排列。除了<p>就是<p>这样的页面,朴素得不能再朴素。要么就是设计一个很好看,很复杂的页面。我自己手工的把内容粘贴到页面的模板之中去。如果有很多类似的网页,还要保证它们的风格是一致的。如果每个页面还有到其他页面的链接,比如是上一页,下一页之类的,It is a nightmare。把内容与外观分离,就这样成为了我16岁的梦想。

onreadystatechange事件

  • 当服务器给予我们反馈时,我们需要实现一些逻辑
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化:<ul><li>0:请求未初始化;</li><li>1:服务器连接已建立;</li><li>2:请求已接收;</li><li>3:请求处理中;</li><li>4:请求已完成,且响应已就绪。</li></ul>
status 200: "OK";404: 未找到页面

下载方法见 http://www.linuxidc.com/Linux/2013-10/91140.htm

function setsubclass(main){
  var is_selected="N";
  if (document.frm.subclass.options.length!=0) {
    for (i=0;i<=document.frm.subclass.options.length;i )
    document.frm.subclass.options[i]=null ;
  }
  //重复才有效
  if (document.frm.subclass.options.length!=0) {
    for (i=0;i<=document.frm.subclass.options.length;i ){
    document.frm.subclass.options[i]=null ;
    document.frm.subclass.options.remove(i);
    }
  }

7、perl,php,asp

服务器响应内容

  • 如果响应的是普通字符串,使用responseText,如果响应的是XML,使用responseXML
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

------------------------------------------分割线------------------------------------------

  for (i=0;i<xmlObj.childNodes.length;i ){
    var values="";
    var lables="";
    if (is_selected=="Y") return;
    labels=xmlObj.childNodes(i).getAttribute("display_name");
    values=xmlObj.childNodes(i).text;
    //alert(labels " | " main);
    if (labels==main){
      is_selected="Y";
      for (j=0;j<xmlObj.childNodes(i).childNodes.length;j ){
      //subclass_name="document.frm.subclass";
      labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name");
      values=xmlObj.childNodes(i).childNodes(j).text;
      //alert(values);
      document.frm.subclass.add(document.createElement("OPTION"));
      document.frm.subclass.options[j].text=labels;
      document.frm.subclass.options[j].value=values;
      }
    }
  }
}
</script>

       我很坦白,我从来没有用过jsp,我不喜欢java提供的那些东西(请不要因此骂我浅薄,我知道它们的商业价值,但是现在仅仅是说网页设计)。按照顺序,我用过的是这么三种网络脚本。perl是我接触的最早的一个网络脚本,那个时候一般都是用cgi这个名字。后来我有遇到了php,最后才是asp。这里我只是谈网页的问题,不涉及到这些网络脚本怎么实现网络的交互的。也只是就着网络脚本,说说它们怎么又能实现内容与外观分离的。而且这三种虽然在访问文件,访问数据库,使用模板,产生html输出各个阶段和模块上各有不同,但是原理一样,方法相似,所以通称网络脚本。网络脚本是让我激动的东西,而且同样作为engine驱动着很多现在正在运行的网站,比如经典的LAMP组合。它们关键的地方是能够产生html输出。因为html不再是你自己手写的了,所以不需要经过你的手就能把html的输出产生变动,这样就有灵活性。为了文章能够分出更多的节,我按照我个人的认识顺序来看看网络脚本使用

服务器
  • Apache;
  • web服务端开发的语言;
  • 设置访问的网站:
  • 设置网站根目录;
  • 往网站的目录中拷贝文件即可:
    • .html:如果存在该页面,会原封不动的返回给用户;
    • .php:会将php中的代码执行完,将结果返回给浏览器。

 

<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm">
类型<SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT>
<option selected value="" ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>

8、网络脚本和文件

php如何读取文本数据

  • 目的:实现数据和逻辑代码分离;
  • PHP之所以被称为“最好的编程语言”:使用十分方便,基本上我们能够想到的功能,都帮我们封装成了方法:
file_get_contents(文件路径);

目录:

account.xml 如下:

       我最先看到网络脚本的使用,是leoboard这样的cgi程序,它使用文本作为数据的存放媒介。数据来源是文本,然后cgi中的perl程序会对文本进行解析,然后把解析的结果可能会放到变量之中,最后变成html的输出。这里就是通过cgi程序作为中介,把文本的内容表现到了html之中。

Ajax数据传输XML

第1部分 PHP的安装与运行
第1章 PHP简介
1.1 PHP的含义
1.2 使用PHP的原因
1.3 PHP的演变过程
1.4 PHP5.3 新增的内容
1.4.1 名称空间
1.4.2 goto运算符
1.4.3 nowdoc语法
1.4.4 三目运算符的简洁形式
1.4.5 高级变化
1.5 小结
第2章 第一个PHP脚本
2.1 安装PHP
2.1.1 在Ubuntu Linux系统上安装PHP
2.1.2 在Windows系统中安装PHP
2.1.3 在Mac OS X系统中安装PHP
2.1.4 测试安装结果
2.1.5 时区设置
2.2 运行PHP的其他方法
2.2.1 在其他Web服务器上运行PHP
2.2.2 自己编译PHP软件
2.2.3 远程运行PHP
2.3 创建第一个脚本程序
2.3.1 在HTML中嵌入PHP脚本
2.3.2 增强脚本的功能
2.3.3 使用注释增加代码的可读性
2.4 小结
2.5 习题
第II部分PHP语言基础
第3章 PHP语言基础
3.1 在PHP中使用变量
3.1.1 命名变量
3.1.2 创建变量
3.2 数据类型
3.2.1 松散类型
3.2.2 测试变量的类型
3.2.3 改变变量的数据类型
3.2.4 强制类型转换
3.3 运算符与表达式
3.3.1 运算符类型
3.3.2 运算符的优先级
3.4 常量
3.5 小结
3.6 习题
第4章 选择与循环
4.1 选择语句
4.1.1 用if编写简单的选择语句
4.1.2 用else语句提供备选方案
4.1.3 用switch语句对表达式进行多次判断
4.1.4 使用三目运算符的简约编码
4.2 用循环结构完成重复操作
4.2.1 用while语句实现简单的循环
4.2.2 d0while循环
4.2.3 使用for语句的简洁循环结构
4.2.4 用break语句退出循环
4.2.5 用continue语句跳过本次循环
4.2.6 创建嵌套循环
4.3 在HTML中结合选择语句和循环语句
4.4 小结
4.5 习题
第5章 字符串
5.1 创建和访问字符串
5.1.1 在字符串中插入比较复杂的表达式
5.1.2 自定义分隔符
5.1.3 创建字符串的其他方法
5.1.4 求字符串的长度
5.1.5 访问字符串中的单个字符
5.2 搜索字符串
5.2.1 用strstr()函数搜索字符串
5.2.2 用strpos()和strrpos()函数定位字符串位置
5.2.3 用substr.count()函数确定字符串出现的次数
5.2.4 用strpbrk()函数搜索字符集
5.3 在字符串中进行字符替换
5.3.1 用s蛙.replace()函数替换全部搜索字符串
5.3.2 用substr.replace()替换字符串的一部分内容
5.3.3 用strtr()函数变换字符
5.4 大小写转换
5.5 格式化字符串
5.5.1 通用的格式化函数printf()和sprinttq()
5.5.2 删除字符串中空白符的函数:trim()、ltrim()和rtrim()
5.5.3 用s廿l.pad()函数填充字符串
5.5.4 用wordwrap()函数实现自动换行
5.5.5 用number.format()函数格式化数值
5.6 小结
5.7 习题
第6章 数组
6.1 数组概述
6.2 创建数组
6.3 访问数组的元素
6.3.1 改变元素内容
6.3.2 用print.r()函数输出整个数组
6.3.3 用array.slice()函数读取数组中连续几个元素
6.3.4 统计数组中元素的个数
6.3.5 逐个访问数组的元素
6.4 用foreach()循环访问数组
6.4.1 用foreach循环访问数组的每个值
6.4.2 用foreach循环访问数组的键和值
6.4.3 用foreach循环修改数组值
6.5 多维数组
6.5.1 创建多维数组
6.5.2 访问多维数组的元素
6.5.3 多维数组的循环访问
6.6 数组的操作
6.6.1 数组排序
6.6.2 添加和删除数组元素
6.6.3 数组的合并
6.6.4 数组与字符串之间的转换
6.6.5 把数组转换为变量列表
6.7 小结
6.8 习题
第7章 函数
7.1 函数的定义
7.2 函数的作用
7.3 调用函数
7.4 变量函数
7.5 用户自定义函数
7.5.1 函数的参数
7.5.2 可选形参和形参的默认值
7.5.3 函数的返回值
7.5.4 变量的作用范围
7.5.5 创建匿名函数
7.6 引用
7.6.1 将引用传递给自定义函数
'7.6.2 从自定义函数中返回引用
7.7 编写递归函数
7.8 小结
7.9 习题
第8章 对象
8.1 面向对象程序设计的概念
8.2 面向对象程序设计的优点
8.3 面向对象程序设计的基础
8.3.1 类
8.3.2 对象
8.3.3 属性
8.3.4 方法
8.4 在PHP中创建类和对象
8.5 创建和使用属性
8.5.1 属性的可见性
8.5.2 声明属性
8.5.3 访问属性
8.5.4 静态属性
8.5.5 类常量
8.6 方法
8.6.1 方法的可见性
8.6.2 方法的创建
8.6.3 方法的调用
8.6.4 方法的参数和返回值
8.6.5 在方法中访问对象的属性
8.6.6 静态方法
8.6.7 用类型提示检查方法的参数
8.6.8 用封装实现独立性
8.7 用?-get()、一set()和.call()重载对象
8.7.1 用一get()和一set()方法重载属性访问
8.7.2 用call()重载方法调用
8.7.3 其他重载方法
8.8 用继承扩展对象的功能
8.8.1 重载父类的方法
8.8.2 保留父类的功能
8.8.3 用final类和方法阻止继承和重载
8.8.4 抽象类和抽象方法
8.8.5 接口
8.9 构造方法和析构方法
8.9.1 用构造方法建立新对象
8.9.2 用析构方法撤销对象
8.10 自动加载类文件
8.11 将对象存储为字符串
8.12 判断一个对象的类
8.13 小结
8.14 习题
第III部分 PHP的实际应用
第9章 用PHP处理HTML表单
9.1 HTML表单的运行过程
9.2 用PHP截获表单数据
9.2.1 表单数据的安全性
9.2.2 处理空表单字段
9.3 多值字段的处理
9.4 用PHP生成web表单
9.5 在表单中存储PHP变量
9.6 创建文件上传表单
9.6.1 访问上传文件的信息
9.6.2 限制上传文件的大小
9.6.3 存储和使用上传文件
9.7 表单提交后的重定向
9.8 小结
9.9 习题
第10章 用查询字符串、cookie和会话保存页面状态
10.1 用查询字符串保存页面状态
10.1.1 建立查询字符串
10.1.2 访问查询字符串中的数据
10.2 用cookie保存页面状态
10.2.1 cookie的组成
10.2.2 在PHP中设置cookie
10.2.3 在脚本中访问cookie
10.2.4 删除cookie
10.3 用PHP会话存储数据
10.3.1 创建会话
10.3.2 读取和写入会话数据
10.3.3 撤销会话
10.3.4 通过查询字符串传递会话ID
10.3.5 改变会话的行为
10.4 小结
10.5 习题
第11章 文件与目录
11.1 文件与目录基础
11.2 获取文件的信息
11.2.1 文件的时间属性
11.2.2 从路径获取文件名
11.3 打开和关闭文件
11.3.1 用fopen()打开文件
11.3.2 用fopen()关闭文件
11.4 文件的读写
11.4.1 读写字符串
11.4.2 文件末尾的测试
11.4.3 一次读取一行内容
11.4.4 读取CSV文件
11.4.5 读取和写入整个文件
11.4.6 随机存取文件数据
11.5 文件的权限
11.5.1 改变文件的权限
11.5.2 检查文件权限
11.6 文件的复制、重命名和删除
11.7 目录
11.7.1 其他目录函数
11.7.2 目录对象
11.7.3 区分文件与目录
11.8 设计一个文本编辑器
11.8.1 创建文本编辑器的脚本程序
11.8.2 测试文本编辑器
11.8.3 文本编辑器示例说明
11.9 小结
……
第12章 数据库和SQL基础
第13章 使用PHP检索MySQL数据库中的数据
第14章 使用PHP操纵MySQL数据
第15章 使用PEAR简化工作
第16章 PHP及其他应用程序
第17章 用PHP语言生成图像
第18章 使用正则表达式来匹配字符串
第19章 使用XML
第20章 编写高质量的代码
附录

<?xml version="1.0" encoding="gb2312"?>
<item>
 <class display_name="未选定">
  <subclass display_name="">Not Available</subclass>
 </class>
 <class display_name="推荐网站">
  <subclass display_name="看上去很美">www.7say.com</subclass>
  <subclass display_name="移动互联">www.xj139.com</subclass>
  <subclass display_name="众信实业">www.xjzxsy.com</subclass>
 </class>
 <class display_name="门户网站">
  <subclass display_name="新浪">www.sina.com</subclass>
  <subclass display_name="搜狐">www.sohu.com</subclass>
 </class>
 <class display_name="其它网站">
  <subclass display_name="蓝色理想">www.blueidea.com</subclass>
 </class>
</item>

9、网络脚本和数据库

XML简介

  • XML:指可扩展标记语言EXtensible Markup Language,他设计的时候是用来传递数据的,虽然格式跟HTML类似.。
  • xml示例:下面是一个XML示例
<?xml version="1.0" encoding="UTF-8"?>
<singer>
<name>周杰伦</name>
<age>18</age>
<skill>途牛</skill>
</singer>
  • XML是纯文本,这点跟HTML很像,所以我们可以用任何的文本编辑软件去打开编辑它。

澳门新浦京娱乐场网站 2

1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中。这...

       后来我才看到了网络脚本和数据库的连用。经典的搭配有php mysql和asp access,我都有用过,不过都是很简单的。把数据储存在数据库中好处当然是多多,专业人士可以有很多事务啊之类的术语来描述其好处。不过显而易见的是,储存和获取的方法是标准化的,通过SQL嘛。而用文本作为存放媒介,文件格式以及解析,还有文件的完整性,容错这些都需要网络脚本设计者自己来控制,虽然很自由,但是更多的是劳累。同样,一种脚本有自己的一种格式,多浪费。要换论坛程序这样的情况出现的时候,又需要了很多麻烦。

XML语法

  • 虽然看起来跟HTML类似,但是XML的语法有些需要注意的,更为详细的可以查阅:http://www.w3school.com.cn/xml/index.asp。
  • XML声明:第一行是XML的声明,指定XML版本(1.0)以及使用的编码(UTF-8万国码):
<?xml version="1.0" encoding="UTF-8"?>
  • 自定义标签,XML中没有默认的标签,所有的标签都是我们自定义的;
  • 注:不要使用数字开头,不要使用中文。
<!-- 下列标签都是被允许的 -->
<fox></fox>
<name></name>
  • 双标签XML中没有单标签,都是双标签
<haha>标签内</haha>
  • 根节点:XML中必须有一个根节点,所有的子节点都放置在根节点下
<root>
  <name></name>
</root>
  • XML属性:跟HTML一样,XML的标签里面也能够添加属性type = 'text',但是不建议这样用,而是使用标签的方式来表述内容(下半部分代码)
<!-- 使用属性配合标签表述信息 -->
<person sex="female">
  <firstname>Anna</firstname>
  <lastname>Smith</lastname>
</person>
<!-- 使用标签来表述信息 -->
<person>
  <sex>female</sex>
  <firstname>Anna</firstname>
  <lastname>Smith</lastname>
</person>

10、网络脚本和模板

XML解析

  • 因为XML就是标签,所以直接用解析Dom元素的方法解析即可;
  • html代码:
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Document</title>
</head>
<body>
      <person id='personXML'>
          <name>fox</name>
          <age>18</age>
          <skill>小花花</skill>
      </person>
</body>
</html>
  • 获取方法:
<script type="text/javascript">
    var xmlObj = document.getElementById("personXML");
    var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
    console.log(name);
</script>

       我记得当时我学asp的时候,很多文章就是这么介绍的。asp能够夹杂在html的代码之中,可以很方便的使用。而我使用perl的cgi的时候,很多程序又是使用满是$xxx的模板来做html输出的。这个时候,我就想who is better?模板我还是蛮欣赏的。初级阶段的模板就是很多以前的cgi的网络文章程序中的那样,在html中放perl的变量名,然后最后输出的时候做一个替换。现在的模板当然要复杂好多,理论也很多。但是,我们可以看到的一点是模板做到了"把业务逻辑和表现逻辑分离"。一般模板和脚本的关联就是通过一些两方面都知道名字的变量或者数组。然后脚本在变量中预先把内容存入这些变量之中,模板再把变量和数组中的内容提取出来插入到html之中。由于模板大部分是由html组成,所以比较适合给设计人员来设计。而且脚本的任务也就仅仅致力于从数据库也好,文本也好,这样的数据源中取出内容,进行一些加工,然后存入到变量之中。至少让脚本程序员免于考虑最终的外观问题。

PHP中设置Header

  • 在php中如果要使用xml传输数据,需要使用header()设置返回的内容为xml:
header('content-type:text/xml;charset=utf-8');
  • 从php中获取xml内容,html中的代码如下:
<script type="text/javascript">
    document.querySelector('#getXML').onclick = function () {
        var ajax = new XMLHttpRequest();

        ajax.open('get','get_XMl.php');

        ajax.send();

        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status==200) {
                // 如果 返回的是 xml文件
                console.log(ajax.responseText);

                // 异步 对象中 有另外一个属性 用来专门获取 xml
                // xml对象 在浏览器端 就是一个 document对象
                // 解析时 可以直接使用 querySelector 或者 getElementById等 document对象 有的语法
                console.log(ajax.responseXML);
                console.log(ajax.responseXML.querySelector('name').innerHTML);
                // 下面这个 页面文档对象,和ajax.responseXML一模一样, 如果要获取某个标签,使用同样的方法
                console.log(window.document);
            }
        }
    }
</script>
  • php:
<?php
        header('content-type:text/xml;charset=utf-8');
        $text = file_get_contents("01-getFile-xml.xml");
        echo $text;
?>
  • xml:
<?xml version="1.0" encoding="UTF-8" ?>
<yijiang>
        <name>yijiang</name>
        <age>20</age>
        <sex>男</sex>
</yijiang>

11、网络脚本的时代

Ajax中获取xml:
  • 浏览器:

  • 通过xhr.responseXML获取返回的xml值;

  • (如果通过xhr.responseText获取,返回的是字符串)。

  • 服务器:

  • 准备一个xml文件;

  • php中获取xml文件内容,并返回(注意要设置header:header('content-type:text/xml;charset=utf-8');

       我们现在基本上就处在这么一个时代之中,大部分的页面已经不是手工编写的html了。而是由网络脚本动态产生的。方法步骤都是类似的:数据源 网络脚本 模板=页面。似乎故事已经到了终结了。因为美梦已经成真了。利用数据库中存放数据,模板来控制显示,网络脚本进行一些计算和沟通工作,内容和外观分离的梦想已经实现了。而且,现下的很多现成的程序,一些CMS(内容管理系统),你直接在服务器上安装好,就能够享受其便利了。但是,我们还有更多选择。

实际开发中xml用的频率不是很高,敲两遍就可以了。

12、XML的登台

案例:重写明星头像
  • html中:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change</title>

    <style>
        table{
            width: 400px;
            margin: 20px auto;
            border: 1px solid #000;
        }
        td{
            border: 1px solid #000;
        }
        img{
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <script>
        //1.
        var xhr = new XMLHttpRequest();
        //2.
        xhr.open("get","change-xml.php");
        //3.
        xhr.send();
        //4.
        xhr.onreadystatechange = function () {
            //5.
            if (xhr.readyState==4 && xhr.status==200){
                var responseStars = xhr.responseXML;
                var stars = responseStars.querySelector("stars").children;
                console.log(stars[0].querySelector("name").innerHTML);
                var str = "<table>";
                for(var i=0; i<stars.length; i  ){
                    str  = "<tr>";
                    str  = "<td>" stars[i].querySelector("name").innerHTML "</td>";
                    str  = "<td>![](" stars[i].querySelector("pic").innerHTML ")</td>";
                    str  = "<td>" stars[i].querySelector("description").innerHTML "</td>";
                }
                str  = "</table>";

                document.body.innerHTML = str;
            }
        }
    </script>
</body>
</html>
  • php中:
<?php
    header('content-type:text/xml;charset=utf-8');
    echo file_get_contents('change-xml.xml');
?>
  • xml中:
<?xml version="1.0" encoding="UTF-8" ?>
<stars>
    <star>
        <name>Angelababy</name>
        <age>30</age>
        <description>著名女演员</description>
        <pic>images/baby.jpg</pic>
    </star>
    <star>
        <name>mage</name>
        <age>16</age>
        <description>国际名模</description>
        <pic>images/mage.jpeg</pic>
    </star>
    <star>
        <name>wangge</name>
        <age>18</age>
        <description>大陆著名企业家</description>
        <pic>images/shuaige.jpeg</pic>
    </star>
</stars>

       XML应该不是什么陌生的东西了。如果你不知道,说明你可能已经很久都没有关心过网页设计或者说是计算机这个行业了。XML的好处,长处,已经被说烂了。我就不多说了。
我把XML分为两类:作为数据或者文档的XML,以及功能性的XML。这个分类是我自己下的,功能性的XML指的就是HTML,SVG,MathML这些。可能SVG什么的你不了解,但是至少HTML你知道吧。关于HTML也是XML这个观点,你应该听说过。HTML为什么被我说成功能性的XML呢?因为如果你浏览器为观点,它认识HTML,它能够把HTML标记的能内容作出显示。而如果是一般的XML,它就不认得,如果是IE会调用内部的一个显示XML的模板把它显示出来,但是有的浏览器就不会。也就是说,一般的XML其中的内容元素,对于浏览器来说它是不知道什么意义的,而HTML的元素是对浏览器有特殊意义的。同样,SVG这些XML也是这样,虽然标准仍然在制定之中,浏览器对它的支援还需要一些插件。但是SVG的基本结构不会有什么变动了,它就是通过标签的标记,通过浏览器的读取产生二维的图像。关键的地方就是,浏览器认得SVG中的元素,知道它的意义,并且能够作出显示。
自然,对于浏览器没有特殊意义的XML就是文档数据型的。把XML分为文档为中心和数据为中心的这种分法是非常常见的。关于这个话题,我在后面继续说。

Ajax传输JSON

13、HTML作为一种功能性的XML

JSON语法

  • JSON(JavaScript Object Notation)
    一种字符串格式;
    是ECMAScript的子集,作用是进行数据的交换;
    而且由于语法更为简洁,网络传输以及机器解析都更为迅速;
    使用的最多,基本上所有的语言都有将JSON字符串转化为该语言对象的语法。

  • 语法规则:

  • 数据在键值对中;

  • 数据由逗号分隔;

  • 花括号保存对象;

  • 方括号保存数组;

  • 总结:属性名必须使用双引号包裹,属性值(数组除外)必须使用双引号包裹。

  • 数据类型:

  • 下列内容,无论是键还是值 都是用双引号包起来:

    • 数字(整数或浮点数);
    • 字符串(在双引号中);
    • 逻辑值(true 或 false);
    • 数组(在方括号中);
    • 对象(在花括号中);
    • null。
  • 示例代码:下部分代码看起来类似于定义JavaScript对象

// 基本对象
{
      "name":"fox",
      "age":"18",
      "sex":"true",
      "car":null
}
// 数组
[
      {
          "name":"小小胡",
          "age":"1"
      },
      {
          "name":"小二胡",
          "age":"2"
      }
]

       我现在把HTML完全作为一种表现语言,它的唯一功能就是把内容作出显示。也就是我把在HTML中表现内容的语意这个梦想给完全放弃了。HTML就是一个功能性的XML,它的目的就是让浏览器显示。要把内容和表现分离,我就是要从别的数据源中转换到HTML。那是不是CSS就多余了?当然不会,css的目的是帮助HTML更好的表达如何显示这个要求。也就是XHTML CSS共同表达的一个目的,网页的外观布局。它们的目的是一致的,而不是我以前想象中的HTML表达内容,css来表达外观。而且CSS的存在,能够表达更加精确更加丰富的内容,而且比用table这样的表格排版更加简洁明了。

JSON解析

  • 接下来演示如何使用JavaScriptPHPJSON进行解析

  • 基本使用步骤:

14、XML作为HTML的源头

JSON图

       我把HTML表达网页的内容这个想法给放弃了之后,很自然的想法是把XML作为HTML的数据来源。但是这并不是很常见的做法。更多的做法是,利用数据库,利用文件然后用网络脚本进行提取,然后可能还要通过一道模板,直接产生HTML。其中并没有XML的位置,那么到底在产生HTML的过程中需不需要XML呢?
现在问题已经很明白了,HTML完全作为一种表现语言。焦点是对于HTML从何而来这个问题。务实的态度是尊重现有的解决方案,而且它们可以做得很好。这里只是对于XML能够在产生HTML的过程中的什么阶段进行参与工作,进行一些个人的看法的探讨。

JavaScript中
  • 使用JSON对象:
  • JSON.parse()方法:将JSON字符串转化为JavaScript对象
  • JSON.stringify()方法:将JavaScript对象转化为JSON字符串
  • 由于老式IE(8以下)浏览器中没有JSON对象,通过导入JSON2.js框架即可解决,框架获取地址为:JSON2.js_github地址(https://github.com/douglascrockford/JSON-js);
var Obj = {
  name:"fox",
  age:18,
  skill:"撩妹"
};
console.log(Obj);
// 将JavaScript对象格式化为JSON字符串
var jsonStr = JSON.stringify(Obj);
console.log(jsonStr);
// 将JSON字符串转化为JavaScript对象
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
  • 使用eval()方法:使用eval()方法需要注意的是,需要将内容使用()括号包裹起来,如示例代码:
<script type="text/javascript">
var jsonStr ={
  "name":"fox",
  "age":18,
  "skill":"撩妹"
};

var jsonObj = eval('(' jsonStr ')'); console.log(jsonObj);

</script>

15、XML直接产生HTML

PHP中
  • json_decode()方法:

  • json字符串转化为php变量

  • json_encode()方法:

  • php变量转化为json字符串

  • 示例代码:

<?php
    header("Content-Type:text/html;charset=utf-8");
    // json字符串
    $jsonStr = '{"name":"yijiang","age":"18","skill":"歌神"}';
    // 字符串转化为 php对象
      print_r(json_decode($jsonStr));

      echo "<br>";
      // php数组
      $arrayName = array('name' =>'littleFox' ,'age' => 13 );
      // php对象 转化为 json字符串
      print_r(json_encode($arrayName));
 ?>
  • 输出结果为:
stdClass Object ( [name] => yijiang [age] => 18 [skill] => 歌神 )
{"name":"littleFox","age":13}

       这个可能是很多人头脑中首先想到的办法。利用XSLT,把XML转换成HTML。而且关于这个,我将在文章最后,给一个我个人的全面的想法。
我觉得利用XML产生HTML,主要是用在小型的纯发布的场合(比如个人主页),因为对于XML文件的更新和删除这些,并不是很完善。而且即使是使用XML数据库,也不能胜任大型的场合。而XML更多的是作为中间数据

解析JSON的完整写法:
  • html中:此时js中获取返回的数据使用xhr.responseText
    <script>
        //1.
        var xhr = new XMLHttpRequest();
        //2.
        xhr.open("post","02-getFile-json.php");
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //3.
        xhr.send();
        //4.
        xhr.onreadystatechange = function () {
            //5.
            if (xhr.readyState==4 && xhr.status==200){
                var person = JSON.parse(xhr.responseText);
                console.log(person);
                //Object {name: "jiang", age: "16", skill: "撩汉"}
                console.log(person.name);   //jiang
                console.log(person.age);    //16
            }
        }
    </script>
  • php中:
<?php
    echo file_get_contents("02-getFile-json.json");
?>
  • json文件:
{
    "name":"jiang",
    "age":"16",
    "skill":"撩汉"
}

16、有数据库产生XML然后产生HTML

Ajax工具函数封装

       这可能是一个很好的方案。只是在现在看来有一些多余。因为网络脚本从数据库中提取了内容之后,直接就产生HTML了,或者调用一个模板也把HTML产生了。如果其中在多一个产生XML的过程,还需要再编写XSLT来产生HTML,让人觉得没有这个必要。

原生Ajax写法

  • 原生使用Ajax主要分为五步,需要手写较多内容,如果每次我们使用Ajax都需要手写一遍,较为浪费时间,所以我们将公共代码抽取,封装为工具函数。

  • 五步使用法:

  • 建立XMLHTTPRequest对象

  • 使用open方法设置和服务器端交互的基本信息:

    • 设置提交的网址、数据以及post提交的一些额外内容;
  • 使用send设置发送的数据,开始和服务器端交互:

    • 发送数据;
  • 注册事件:

    • 当服务器回应我们了,我们想要执行什么逻辑;
  • 更新界面:

    • 在注册的事件中,获取返回的数据,更新界面。
  • 示例代码:GET:

  • get的数据,直接在请求的url中添加即可;

<script type="text/javascript">
  // 创建XMLHttpRequest 对象
  var xml = new XMLHttpRequest();
  // 设置跟服务端交互的信息
  xml.open('get','01.ajax.php?name=fox');
  //发送数据
  xml.send(null);    // get请求这里写null即可,或者直接空
  // 接收服务器反馈
  xhr.onreadystatechange = function () {
      // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 打印响应内容
          alert(xml.responseText);
      }
  };
</script>
  • 示例代码:POST:
<script type="text/javascript">
  // 异步对象
  var xhr = new XMLHttpRequest();

  // 设置属性
  xhr.open('post', '02.post.php' );

  // 如果想要使用post提交数据,必须添加
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  // 将数据通过send方法传递
  xhr.send('name=fox&age=18');

  // 发送并接受返回值
  xhr.onreadystatechange = function () {
      // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
             alert(xhr.responseText);
      }
  };
</script>

17、XML与数据库

抽取公共部分

  • 重复步骤分析:

  • 创建异步对象;

  • 异步对象open,send方法调用;

  • post方法需要添加HTTP协议头文件;

  • 判断Ajax响应状态。

  • 哪些部分是需要使用者自定义的:

    1. 提交方法;
    2. url地址;
    3. 数据;
    4. Ajax请求成功调用方法;
      上述内容,应该是调用时,由用户传入的。
//优化,传入一个对象作为参数,对象中分别包含其它属性:method,url,data,success
function ajax_tool(params) {
    //1.创建异步对象
    var xhr = new XMLHttpRequest();
    //2.3.
    if (params.method == "get"){
        if (params.data){
            params.url  = "?";
            params.url  = params.data;
        }
        //2.设置方法和url等
        xhr.open(params.method,params.url);
        //3.直接发送数据
        xhr.send();
    }else {
        //2.
        xhr.open(params.method,params.url);
        //设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        if (params.data){
            //3.如果有数据,就发送数据
            xhr.send(params.data);
        }else {
            //如果没有数据直接发送就好
            xhr.send();
        }
    }
    //4.注册事件
    xhr.onreadystatechange = function () {
        //5.在事件中获取数据,并修改界面
        if (xhr.readyState==4 && xhr.status==200){
            success(xhr.responseText);
        }
    };
}

       很自然的,就延伸出了一个讨论就是"XML与数据库,用哪一个?"。其实这个问题之所以成为,我认为是XML的发展不成熟。XML有其结构和功能上的优越性,但是同样带来了很大的复杂度。对于XML进行查询,就比对于结构简单的数据库查询复杂变数大很多。同样,XML的表现力也要强很多。另外还与XML的两个用法有关,XML一方面可以用作以数据为中心,比如网站的客户订单。这和关系型的数据库的特点是一致的,每个table的项是固定的,数据都是类似重复的。而XML同时还能用作文档为中心的,比如你写一篇文章时,用XML对文章进行标记。这样使得标记出现的位置,以及上下文就变得非常重要。
所以关于,在什么场合下用XML,什么场合下需要XML这种问题,很难有答案。至少有一点,随着XML技术的完善和被越来越多的人掌握,XML会在其适合的场合越来越多的使用。

案例:聊天机器人

18、XML与网站

jQuery中的Ajax

       如果仅仅是泛泛而谈XML与数据库,我觉得是很难定论。但是如果把讨论的范围缩小到网站,我觉得还是很容易得出答案的。对于交互性的场合,比如论坛,数据经常要更新,XML就不适合。对于发布性的场合,比如文章系统,XML就是一个很好的选择。当然还要考虑查询是否方便。以及XML适合描述松散的信息,比如站长信息这样的数据存放到数据库中显然是overkill,而放到xml中就比较合适。所以,我个人认为如果是个人主页这样性质的网站,使用xml是非常合适的。

JQuery中Ajax使用

  • JQuery作为最受欢迎的js框架之一,常见的Ajax已经帮助我们封装好了,只需要调用即可,更为详细的api文档可以查阅:w3cSchool_JQueryAjax:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

19、在个人主页中使用XML

$.get()方法

使用`get`方法取代复杂 $.ajax 向服务器获取数据;
请求成功时可调用回调函数;
如果需要在出错时执行函数,请使用 $.ajax。
  • 参数列表
参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。待发送 Key/value 参数
success(response) 可选。规定当请求成功时运行的函数。额外的参数:response - 包含来自请求的结果数据。
dataType 可选。规定预计的服务器响应的数据类型。默认地,jQuery 将智能判断。可能的类型:"xml"、"html"、"text"、"script"、"json"、"jsonp"。
  • 关于dataType的说明:预计从服务端获取的数据类型,可以不写,如果写了,写成json,jq内部会帮我们进行JSON.parse()的转化。注意:

    • 如果写成json,并且服务端返回的就是json格式字符串,在回调函数中获取的实参就是转化完成的js对象,直接按照对象使用即可;
    • 如果写成json,但是返回的不是json格式的数据,那么将会返回null。
  • 使用演示:

  • html代码:

<script src="jquery.min.js"></script>
<script>
        $.get("01-jq-get.php",{name:"yijiang",des:"大帅比"},function (data) {
            console.log(data);
        });
</script>
  • php代码:
<?php
        echo $_GET['name']."是一个".$_GET['des'];
?>
  • 中文PDF清晰扫描版,我的思考。结果:yijiang是一个大帅比

       个人主页一般都是无法购买那种有网络脚本支持的服务器的,更不用说数据库了,这个是来自于现实环境的限制。个人主页的数据一般比较松散凌乱,而且文档比较多,比较适合XML来描述,这个是显示的需求。
所以综合了这两点,对于一般个人主页的站长来说,这样的组合方案是很不错的:
1、用XML来描述网站数据,用XSLT来做转换
2、注册一个免费的留言板
3、注册一个免费的BLOG
这样你就只需要一个HTML空间,同时又可以实现内容与外观分离,至少对我来说是一个梦想的实现。

$.post方法

使用 post 请求功能以取代复杂 $.ajax;
请求成功时可调用回调函数;
如果需要在出错时执行函数,请使用 $.ajax。
  • 参数
参数 说明
url 必选。发送请求地址
data 可选。待发送 Key/value 参数
callback 可选。发送成功时回调函数
type 可选。返回内容格式,xml, html, script, json, text, _default。
  • html代码:
<script src="jquery.min.js"></script>
<script>
    $.post("02-jq-post.php",{name:"mage",des:"大美妞"},function (data) {
        console.log(data);
    });
</script>
  • php代码:
<?php
    echo $_POST['name'].'是一个'.$_POST['des'];
?>
  • 结果:mage是一个大美妞

20、最终实现指导

$.getJSON方法

在 jQuery 1.2 中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据:
如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
注意:此行以后的代码将在这个回调函数执行前执行。
  • 参数:
参数 说明
url 必选,发送请求地址。
data 待发送 Key/value 参数。
callback 载入成功时回调函数。
  • html中代码:
<script src="jquery.min.js"></script>
<script>
    $.getJSON('02-jq-post.php',function (data) {
        console.log(data);
    })
</script>
  • php中代码:
<?php
    echo file_get_contents('xxx-json.json');
?>
  • json文件代码:
{
    "name":"jiang",
    "age":"16",
    "skill":"撩汉"
}
  • 结果:Object {name: "jiang", age: "16", skill: "撩汉"}

       这个纯粹是个人意见,而且技术门槛相对比较高一些,估计没有人会采纳。
第一步:
       描述你的网站内容。如何描述完全是你的自由,而且是否使用DocBook这样的东西来描述你的文章这样的东西也是你的自由。描述应该分布在很多个xml文件之中,可以利用XInclude技术,也就是利用<xi:include href='...xml'/>这样的标签把所有的xml逐级串起来,最终是一个site.xml。找到了site.xml,就找到了你整个网站的内容。
你可以不用xinclude,而只是简单的用一个元素记录下文件位置,然后在XSLT中用document函数读取也是可行的。
第二步:
       描述你的网站的结构,也就是页面的信息。这个我是用sitemap.xsl来做的。最终产生的就是一个sitemap.xml。里面由类似这样的元素组成:
<page name="article1" template="article.xsl" output="article1.html" param="1"/>
这样有两个非常重要的作用,其一是能够让自动化的工具从产生的页面信息中提取内容,自动调用xslt处理器把网站给编译出来。其二是能够让页面索引到其他页面,比如你要在一篇文章的页面中链接到所属的分类的所有其他的文章,你就可以在sitemap.xml中提供出哪些页面是干什么的,比如所属分类是什么。然后具体page的xsl就可以在sitemap.xml中根据这些信息,然后找到页面最终写出超级链接。
第三步:
       设计每个页面的xslt。xslt的输入有两个,一个是site.xml,另外一个就是sitemap.xml。从site.xml得到内容,从sitemap.xml得到其他页面的位置。
第四步:
利用你喜欢的脚本工具(设置是xslt bat),自动化的完成整站的编译工作。你还可以提供选项选择编译什么页面。
第五步:
       你也可以自己编写一个工具来实现新旧对比的ftp上传工作。

格式化表单$('form').serialize()

我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化,转化成类似name=fox&age=18这样的格式,jQuery已经帮助我封装好了一个格式化数据的方法。
  • 语法:$(selector).serialize() 直接可以将form澳门新浦京娱乐场网站,中拥有name属性的表单元素的字,进行格式化。

  • 示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试jq_serialize方法</title>
  <script type="text/javascript" src="./files/jquery.min.js"></script>
  <script type="text/javascript">
      $(function(){
          $("#getFormInfo").on("click",function(){
              var info = $("#testForm").serialize()
              console.log(info);
          })
      })
  </script>
</head>
<body>
  <form id="testForm">
      <input type="text" placeholder="您的姓名" name="userName">
      <input type="text" placeholder="您的爱好" name="userHabbit">
      <input type="text" placeholder="您最喜爱的食物" name="userHabbit">
  </form>
  <input type="button" value="格式化表单数据" id="getFormInfo">
</body>
</html>
  • 演示效果:userName=yijiang&userHabbit=swimming&userHabbit=meat

$.ajax({})方法

$.ajax()方法相比于前面的方法,拥有更为自由的定制性,可以替换$.get(),$.post()方法。
  • 参数:
  • 在w3cSchool_$.ajax_Api(http://www.w3school.com.cn/jquery/ajax_ajax.asp) 中,关于参数只有下列一个。实际使用中,传递的是一个对象;
  • 而对象的属性在页面的下方(如图可略)
参数 描述
settings 可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。
  • 回调函数
    如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
    beforeSend:在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
    error:在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
    dataFilter:在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
    success:当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
    complete:当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。

  • 示例代码:

  • 这里演示的是常用的属性

$.ajax({
        url:'01.php',   //请求地址
        data:'name=fox&age=18',     //发送的数据
        type:'GET',     //请求的方式
        success:function (argument) {},     // 请求成功执行的方法
        beforeSend:function (argument) {},  // 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},   //请求失败调用
});
案例:注册界面

模板插件

模版引擎简介

  • 我们在使用ajax请求数据时,返回的如果是一个JSON格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果。那么这个包装得过程有没有简单的方法呢?

  • 假设有如下数据(javascript中)

var obj = {
     name:"fox",
     age:18,
     skill:"卖萌"
};
  • 希望包装为:
<ul>
  <li>姓名:fox</li>
  <li>年龄:18</li>
  <li>爱好:卖萌</li>
</ul>
  • 定义模板,替换:
  • 其间需要我们使用对象替换的位置为<%= 属性名 %>部分,如果可以:读取模板->传入对象->完成替换->返回html代码 实现这样的步骤,那么就能够完成我们的模板操作了
<ul>
  <li>姓名:<%= name %></li>
  <li>年龄:<%= age %></li>
  <li>爱好:<%= skill %></li>
</ul>

模版插件原理

我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?

  • 定义正则表达式:
  • 想要匹配<%= 属性名 %>, 我们可以定义如下正则(javascript中):
JS中的RegExp对象:
        创建:
            创建方法1: var reg = new RegExp("正则")
            创建方法2: var reg = /正则/;    推荐使用这种
        使用:
            reg.exec(string) 可以检测并返回字符串

正则含义:
        <%:以 <% 开始
        =s* "="号之后有0个或多个空白字符
        ([^%>] S): 匹配除了%>以外的所有字符(至少1个)
        s*:0个或多个空白字符
        %>:以%>结束

var reg = /<%=s*([^%>] S)s*%>/;

基本使用

  • 定义好作为模板的文本;
  • 使用正则表达式进行匹配替换即可。
// 定义文本
var str = '大家好,我叫<%= name %>,我今年<%= age %>,我的爱好为:<%= skill %>';
// 定义数据
var data = {
    name: 'jiang',
    age: 10,
    skill:'打篮球'
};

// 快速的创建方法,好处,直接使用  即可 不需要考虑 转义
var reg = /<%=s*([^%>] S)s*%>/;
// 返回的是一个对象(数组)
var match = null;

// 使用  while循环 进行检查,知道没有匹配的内容
while (match = reg.exec(str)){
    // 匹配到的字符串
    var mathString = match[0]
    // 子表达式匹配到的字符串
    var subString = match[1];
    // 打印文本内容
    console.log("循环中:" str);
    // 替换字符串的内容
    str = str.replace(mathString,data[subString]);
}
console.log("循环完毕:" str);
  • 演示结果为:
    循环中:大家好,我叫<%= name %>,我今年<%= age %>,我的爱好为:<%= skill %>
    循环中:大家好,我叫jiang,我今年<%= age %>,我的爱好为:<%= skill %>
    循环中:大家好,我叫jiang,我今年10,我的爱好为:<%= skill %>
    循环完毕:大家好,我叫jiang,我今年10,我的爱好为:打篮球

  • 常见的模板插件:

  • BaiduTemplate(百度开发):http://tangram.baidu.com/BaiduTemplate/

  • ArtTemplate(腾讯开发):https://github.com/aui/artTemplate

  • velocity.js(淘宝开发):https://github.com/shepherdwind/velocity.js/

  • Handlebars:http://handlebarsjs.com/

ArtTemplate基本使用

  • 模板引擎的用法大同小异,ArtTemplate由于性能优秀,这里我们演示ArtTemplate的用法:
  • 导入模板引擎:将下载好的ArtTemplate导入到页面中:
<script type="text/javascript" src = "./files/template-native.js"></script>
  • 定义模板:
    <% %>:这样的语法是定义逻辑表达式;
    <%=内容 %>:这样的语法为输出表达式;
    注意:这里的模板type='text'如果写成javascript会执行:
<script type="text" id = "templ01">
        <ul>
            <li><%=name %></li>
            <li><%=age %></li>
            <li><%=skill %></li>
            <li>
                <ul>favouriteFood
                <% for(var i = 0 ;i < favouriteFood.length;i  ) {%>
                    <li><%=favouriteFood[i] %></li>
                <% } %>
                </ul>
            </li>
        </ul>
</script>
  • 定义对象;
  • 调用模板引擎的方法,传入对象,我们可以使用template(模板id,数据);
// 调用模板引擎的方法
var backHtml = template("templ01",data);
// 返回值就是填充好的内容
  • 总结:
    1.导入模板对象;
    2.定义模板;一般情况下,模板使用中,type必须写,写成非javascript的内容,若果留空,会默认解析成为js,会报错。
    3.定义对象;
    4.调用模板引擎的方法,传入对象;
    注意点:
    一、如果出现template error错误,一般模板出错,去查找模板:1.for循环写了开头,没有写结尾;2.for循环中的分隔符写成了逗号。
    二、只能接受对象,不能接受数组。

  • 示例:

<body>
    <script src="template-native.js"></script>
    <script type="text" id="temp">
        <% for(var i=0; i<people.length; i  ){ %>
            <ul>
                <li><%= people[i].name %></li>
                <li><%= people[i].skill %></li>
            </ul>
        <% } %>

    </script>

    <script>
        var data = {
            people:[
                {name: "baby", skill: "演戏"},
                {name: "yijiang", skill: "负责帅"},
                {name: "mage", skill: "负责美"}
            ]
        };
        var backHtml = template("temp",data);
        document.write(backHtml);
    </script>
</body>
使用演示:luowang

同源以及跨域

同源

  • 同源策略是浏览器的一种安全策略,所谓同源是指域名协议端口完全相同。
URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许

跨域方案

  • 顶级域名相同的可以通过domain.name来解决,即同时设置 domain.name = 顶级域名(如example.com);

  • document.domain iframe

  • window.name iframe

  • location.hash iframe

  • window.postMessage()

  • 浏览器中跨域请求方案:http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

JSONP

  • JSON with Padding其本质是利用了html标签的src属性标签具有可跨域的特性,实现跨域用的是script标签,由服务端返回一个预先定义好的Javascript中文PDF清晰扫描版,我的思考。函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成;
  • 使用script标签,<script src="xxx.php"></script>,默认会发送一个get请求到对应的php页面;
  • 只能以GET方式请求
  • 注意只能够通过get方法;
  • 服务端代码:
<?php
    // echo "alert('天气不错哦')";
    $callBack = $_GET['callback'];
    $arr = array(
        'name' =>'大帅比' ,
        'color' =>'red'
    );
    echo $callBack."(".json_encode($arr).")";
?>
  • 前端代码:注意,域名不同
    • 核心是通过script标签src属性提交get请求
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript">
        function fn(data){
             console.log(data);
        }
    </script>

    <script type="text/javascript" src='http://www.section02.com/seciton02_jsonP.php?callback=fn'></script>
</head>
<body>
    <h1>区域1的页面_jsonP演示</h1>
</body>
</html>
  • 如果我们定义的fn方法有形参,会将从服务器拿到的括号中的值传递给形参,并且如果传递过来的是json字符串,会自动帮我们转化为js对象。
jq已经帮我们封装好了jsonp的请求,直接使用即可:
  • dataType预期服务器返回的数据类型为jsonp;
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数;
  • 如果需要给jsonp指定回调函数:通过jsonpCallback为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。
<script>
    function eatFood() {
        console.log("好好吃哟");
    }
</script>
<script src="../03-jq-ajax/jquery.min.js"></script>
<script >
    $.ajax({
        url:"01-jsonp-script.php",
        dataType:"jsonp",
        callback:eatFood()
    })
</script>

jQuery 的$.ajax()

  • 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。

  • dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问;

  • jsonp可以指定服务端接收的参数的“key”值,默认为callback;

  • jsonpCallback可以指定相应的回调函数,默认自动生成

  • 示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript" src='jquery/jquery-3.0.0.min.js'></script>
</head>

<body>
<h1>区域1的页面</h1>
    <input type="button" name="" onclick='sendAjax()' value="jquery区域请求">
</body>

</html>

<script type="text/javascript">
    function sendAjax(){
        $.ajax({
            url:'http://www.section02.com/sectcion02_jqJsonp.php',
            type:'post',
            dataType: 'jsonp',
            data:{name:'itt'},
            success:function(data){
                console.log(data);
            }
        })
    }
</script>

天气预报

  • 一些平台为我们提供了可以直接使用的接口,我们只需要按照他们提供的格式提交数据即可。

  • 百度车联网api:http://developer.baidu.com/map/carapi-7.htm

  • 开发者秘钥ak:0A5bc3c4fb543c8f9bc54b77bc155724

瀑布流

什么是瀑布流?

  • 瀑布值得是从上往下流动的水,并且水量也较大,瀑布流指的是内容、信息,像瀑布一样从上往下进行排布。

  • 瀑布流:示例取自:堆糖网:http://www.duitang.com/topics/

瀑布流实现原理

  • 瀑布流的核心为:

  • 宽度一致,高度参差不齐;

  • 新增行的内容,优先添加到最矮的下方。

  • 难点:

  • 当我们到了新一行时,如何获取上一行高度最小的行高?

  • 可以定义数组用来保存高度,新增了以后替换数组中原始的高度即可。

  • 实现技术:

  • Ajax;

  • jq->Ajax请求;

  • 模板引擎->渲染页面。

  • 知识点:

  • 模板引擎;

  • jqajax请求;

  • php中,字符串和php对象的相互转化;

  • jq插件写法:瀑布流的算法。

  • 补充:

  • 可以直接使用jq对象点出来的语法,除了jq本身,还有jq的插件,这里我们将瀑布流封装成jq插件。

  • jq插件:

    • $.fn.extend,调用:$('xxx').fun;
    • $.extend,调用:$.fun;
    • 注:这里的fun跟我们定义的时候写的属性名一致;
    • jq插件命名一般建议使用jQuery.插件名.js格式;
    • 插件中的方法名建议和插件名一致。
// 为 jq 添加 插件
// 注册完毕以后 使用 $("xxx").fun 使用
$.fn.extend({
    study:function () {
        console.log('我要好好学习了哟');
        // 在这个方法中 我们可以使用 $('选择器')获取到jq对象
        // this 就是我们获取到的jq对象
        // 注意:容易搞混 jq对象跟dom对象 所以这里建议使用以$开头的this替代
        // 一看到 $_开头的,就知道是jq对象,防止跟dom对象弄混
        var $_this = this;
        $_this.css({backgroundColor:'yellow'});
        // jq有一个特点是 链式编程
        // 为了能够链式编程 建议 return 当前使用的jq对象
        return $_this;
    }
});
// 注册完毕以后 使用$.fun 使用
$.extend({
    play:function(){
        console.log('我要玩游戏了哟');
    }
})
案例:(百度开发平台)
  • 1.天气展示;
  • 2.近期电影展示。

本文由澳门新浦京娱乐场网站发布于服务器,转载请注明出处:中文PDF清晰扫描版,我的思考