1.2、Answer：web crawler question 2

概述

2、Query库是基于JavaScript的第三方库，二、JavaScript是web客户端的脚本语言，难道jQuery是基于JavaScript语言编写的客户端的脚本语言的第三方库？python的第三方库和CSS选择器的关系？（关系库是：find、findAll、find_element_by_id）、Query库和AJAX技术的关系？如何实现部分网页信息而AJAX只需要加载一部分自己需求的网页数据？

jQuery产生的背景

　　Python执行JavaScript代码的效率非常低，既费时又费力，尤其是处理规模较大JavaScript代码时，如果有绕开JavaScript并直接解析它的方法（不需要执行JavaScript代码就可以获得信息）会非常实用，可以降低获取信息的难度。jQuery是一种JS框架。

一、jQuery

1、jQuery安装教程：https://www.runoob.com/jquery/jquery-install.html

2、jQuery库是一个基于JavaScript语言的JavaScript 文件

3、jQuery语法（XPath 与 CSS 选择器语法的组合）：$(selector).action()，$定义 jQuery；选择符（selector）"查询"和"查找" HTML 元素；action() 执行对元素的操作

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

注：1、$(document).ready(function(){.. .}：jQuery 函数位于一个 document ready 函数中是为了防止文档在完全加载之前运行 jQuery 代码（在 DOM 加载完成后才操作 DOM ）

　　 2、jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行；JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才执行

4、jQuery库使用：通过HTML中标签调用jQuery：<script>. . .</script>

# jquery库文件在本地并且与网页组成的各个文件在同一目录
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
# 调用CDN中的 jquery 库
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

二、jQuery结构体

1、

三、jQuery模块和功能

1、jQuery 选择器

# jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
# 通过 HTML 元素的 id 属性选取指定的元素：$("#test") 
# 通过指定的 class 查找元素：$(".test") 
# 基于元素名选取元素：$("p")

2、jQuery 事件：页面对不同访问者的响应叫做事件，主要包含：鼠标事件、键盘事件、表单事件、文档/窗口

# jQuery事件
# 1、在元素上移动鼠标。
# 2、选取单选按钮
# 3、点击元素

2.1、鼠标单击事件：click()，鼠标双击事件：dblclick()当按钮点击事件被触发时会调用一个函数

$("p").click(function(){
  $(this).hide();
});

$("p").dblclick(function(){
  $(this).hide();
});

2.2、鼠标移动：1、当鼠标指针穿过元素时：mouseenter()；2、当鼠标指针离开元素时：mouseleave()；3、当鼠标指针移动到元素上方：mousedown()；4、当在元素上松开鼠标按

钮时：mouseup()；5、模拟光标悬停事件：hover()；6、通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点：focus()；7、该元素失去焦点时：blur()

# 当鼠标指针穿过元素时
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
# 当鼠标指针离开元素时
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});
# 当鼠标指针移动到元素上方
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});
# 当在元素上松开鼠标按钮时
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});
# 模拟光标悬停事件
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);
# 通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
# 该元素失去焦点时
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

2.3、显示和隐藏元素：jQuery hide() 和 show()；jQuery toggle()可以切换 hide() 和 show() 方法

　　　　语法：　$(selector).hide(speed,callback)、$(selector).show(speed,callback)、$(selector).toggle(speed,callback)

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

$("button").click(function(){
  $("p").toggle();
});

. . .

四、 AJAX（Asynchronous JavaScript and XML）技术

1、AJAX 是与服务器交换数据的技术，在不重载全部页面的情况下，实现了对部分网页的更新。通过四种Ajax工具JQuery、JSON、DWR、Prototype分别实现页面与后台（类文件）的数据交互，从而使得在不刷新页面的情况下取得数据AJAX 的应用案例：谷歌地图、腾讯微博、优酷视频、人人网. . .

2、这个网页表单使用Ajax技术与web服务器通信

3、AJAX 技术创建的表单，并根据web服务器的响应创建动态性极强网页的过程

XMLHttpRequest 对象 (异步的与服务器交换数据)；XMLHttpRequest对象和web服务器交互，在后台与服务器交换数据，从URL获取数据，而无需让整个的页面刷新。支持 HTTP 、 file:// 和 FTP等协议！
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式). . .

注意：1、AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的；2、AJAX应用程序与浏览器和平台无关的

4、AJAX 工作原理

5、AJAX 实例

<head>
<script>
function loadXMLDoc()
{
    .... AJAX 脚本执行 ...
}
</script>
</head>

6、XMLHttpRequest 对象向服务器发送请求： open() 和 send() 方法：

xmlhttp.open(method,url,async（true/false）);
xmlhttp.send();

注：1、method：请求的类型；GET 或 POST比较

　　　　1、与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用

　　　　2、然而，在以下情况中，请使用 POST 请求：

- 　　无法使用缓存文件（更新服务器上的文件或数据库）
- 　　向服务器发送大量数据（POST 没有数据量限制）
- 　　发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　　2、使用 HTML 表单形式 POST 数据：使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

7、使用 async=true 时，规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数，每当 readyState 属性改变时，就会调用该函数

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

注：1、当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

　　2、readyState 属性存有 XMLHttpRequest 的状态信息，readyState 属性取值

- 　　0: 请求未初始化
- 　　1: 服务器连接已建立
- 　　2: 请求已接收
- 　　3: 请求处理中
- 　　4: 请求已完成，且响应已就绪

　　3、onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化

8、XMLHttpRequest 对象向服务器发送请求，web服务器响应

1、XMLHttpRequest 对象的 responseText 或 responseXML 属性处理不同格式web服务器响应

responseText属性：作为 XML 对象进行解析，适用于服务器的响应是 XML

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

responseXML 属性：responseText 属性返回字符串形式的响应，适用于服务器的响应并非 XML

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

注：AJAX 可用来与数据库进行动态通信等

一、showCustomer() 函数

function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

二、服务器端："getcustomer.php" 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>