JavaScript知识汇总

目录：

1. 基本语法
2. 浏览器对象
3. JS标准对象
4. AJAX
5. jQuery

参考/来源

• 菜鸟教程

JS

基本语法

参考：JavaScript 教程

• 这里记录一下js函数和方法的区别

  • 概念上：函数是随处定义的；方法是在对象里面的，即在一个对象中绑定函数，称为这个对象的方法

  • 代码上：

    1. 函数的定义：
    function abs(x) {
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    } 
    2. 方法的定义
    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
    };
    

• 字符串

  一个字符串可以使用单引号或双引号。

浏览器对象

详细介绍参考：Browser 对象

window

• window对象不但充当全局作用域，而且表示浏览器窗口。

• window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

• 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

navigator

navigator对象表示浏览器的信息，最常用的属性包括：

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

screen

screen对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

location

• location对象表示当前页面的URL信息。例如，一个完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。

• 要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

• 要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

• History 对象属性

属性	说明
length	返回历史列表中的网址数

• History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

JS弹窗

​ 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

​ 弹窗使用 反斜杠 + “n”(\n) 来设置换行。

• 警告框

  警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

  alert("你好，我是一个警告框！");

• 确认框

  确认框通常用于验证是否接受用户操作。当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。

  var r=confirm("弹窗内容");
  if (r==true)
  {
      x="你按下了\"确定\"按钮!";
  }
  else
  {
      x="你按下了\"取消\"按钮!";
  }

• 提示框

  提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

  var person=prompt("请输入你的名字","Harry Potter");
  if (person!=null && person!="")
  {
      x="你好 " + person + "! 今天感觉如何?";
      document.getElementById("demo").innerHTML=x;
  }

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

  setInterval("javascript function",milliseconds);

  var myVar=setInterval(function(){myTimer()},1000);
   
  function myTimer()
  {
      var d=new Date();
      var t=d.toLocaleTimeString();
      document.getElementById("demo").innerHTML=t;
  }

  clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

• setTimeout() - 在指定的毫秒数后执行指定代码。

  setTimeout("javascript function", milliseconds);

  clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

document

详细介绍可参考：HTML DOM Document 对象

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

DOM

简介

​ 通过 HTML DOM(文档对象模型)，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

HTML DOM 节点

在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :

• 文档本身就是一个文档对象
• 所有 HTML 元素都是元素节点
• 所有 HTML 属性都是属性节点
• 插入到 HTML 元素文本是文本节点
• 注释是注释节点

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。元素可以有属性。属性属于属性节点（查看下一章节）。

获得元素的某个属性，直接用.连接即可，如下，完整版可以查看上面链接。

element.style	设置或返回元素的样式属性
element.tabIndex	设置或返回元素的标签顺序。
element.tagName	作为一个字符串返回某个元素的标记名（大写）
element.textContent	设置或返回一个节点和它的文本内容
element.title	设置或返回元素的title属性

事件

​ HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

HTML 事件的例子：

• 当用户点击鼠标时

• 当网页已加载时

• 当图像已加载时

• 当鼠标移动到元素上时

• 当输入字段被改变时

• 当提交 HTML 表单时

• 当用户触发按键时

事件属性的分配：

• 直接在标签设置事件属性 <button onclick ="displayDate()">点这里</button>
• 使用 HTML DOM 来分配事件

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

事件的分类，列出了常见的几个，完整版可以查看上面链接。

• 鼠标事件

  onclick	当用户点击某个对象时调用的事件句柄。	2
  oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
  ondblclick	当用户双击某个对象时调用的事件句柄。	2
  onmouseover	鼠标移到某元素之上。	2
  onmouseout	鼠标从某元素移开。	2
  onmouseup	鼠标按键被松开。	2

• 键盘事件

  onkeydown	某个键盘按键被按下。	2
  onkeypress	某个键盘按键被按下并松开。	2
  onkeyup	某个键盘按键被松开。	2

• 框架/对象（Frame/Object）事件

  onload	一张页面或一幅图像完成加载。	2
  onpageshow	该事件在用户访问页面时触发

• 表单事件

  oninput	元素获取用户输入时触发	3

• 剪贴板事件

  oncopy	该事件在用户拷贝元素内容时触发
  oncut	该事件在用户剪切元素内容时触发
  onpaste	该事件在用户粘贴元素内容时触发

• 打印事件

  onafterprint	该事件在页面已经开始打印，或者打印窗口已经关闭时触发
  onbeforeprint	该事件在页面即将开始打印时触发

• 拖动事件

  ondrag	该事件在元素正在拖动时触发
  ondragend	该事件在用户完成元素的拖动时触发
  ondragenter	该事件在拖动的元素进入放置目标时触发
  ondragleave	该事件在拖动元素离开放置目标时触发
  ondragover	该事件在拖动元素在放置目标上时触发
  ondragstart	该事件在用户开始拖动元素时触发
  ondrop	该事件在拖动元素放置在目标区域时触发

• 多媒体事件

• 动画事件

• 过渡事件

  transitionend	该事件在 CSS 完成过渡后触发。

• 其他

  onmessage	该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
  onmousewheel	已废弃。 使用 onwheel 事件替代
  ononline	该事件在浏览器开始在线工作时触发。
  onoffline	该事件在浏览器开始离线工作时触发。
  onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发。
  onshow	该事件当 元素在上下文菜单显示时触发
  onstorage	该事件在 Web Storage(HTML 5 Web 存储)更新时触发
  ontoggle	该事件在用户打开或关闭 元素时触发
  onwheel	该事件在鼠标滚轮在元素上下滚动时触发

document对象属性和方法

下面为一部分，完整版可以查看上面链接。

document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。

JS标准对象

所有事物都是对象，JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

• 布尔型可以是一个对象。
• 数字型可以是一个对象。
• 字符串也可以是一个对象
• 日期是一个对象
• 数学和正则表达式也是对象
• 数组是一个对象
• 甚至函数也可以是对象

Date（日期） 对象

Date 对象用于处理日期与时间。

• 创建 Date 对象： new Date()

以下四种方法同样可以创建 Date 对象：

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

• 常见方法

  详细方法参考：Date对象

getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。

toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。

Math 对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

• 属性

  E	返回算术常量 e，即自然对数的底数（约等于2.718）。
  LN2	返回 2 的自然对数（约等于0.693）。
  LN10	返回 10 的自然对数（约等于2.302）。
  LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
  LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
  PI	返回圆周率（约等于3.14159）。
  SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
  SQRT2	返回 2 的平方根（约等于 1.414）。

• 方法

  abs(x)	返回 x 的绝对值。
  acos(x)	返回 x 的反余弦值。
  asin(x)	返回 x 的反正弦值。
  atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
  atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
  ceil(x)	对数进行上舍入。
  cos(x)	返回数的余弦。
  exp(x)	返回 Ex 的指数。
  floor(x)	对 x 进行下舍入。
  log(x)	返回数的自然对数（底为e）。
  max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
  min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
  pow(x,y)	返回 x 的 y 次幂。
  random()	返回 0 ~ 1 之间的随机数。
  round(x)	四舍五入。
  sin(x)	返回数的正弦。
  sqrt(x)	返回数的平方根。
  tan(x)	返回角的正切。

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

简介

• 作用

  AJAX 是一种用于创建快速动态网页的技术。

  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• 原理

  

XMLHttpRequest

XMLHttpRequest （XHR）是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建

创建 XMLHttpRequest 对象的语法：

var xmlh = new XMLHttpRequest();

XHR请求

• 向服务器发送GET请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

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

• 向服务器发送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");

setRequestHeader(header,value)	向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值

• open方法参数说明

  • url - 服务器上的文件

  • 异步 - True 或 False？

    当使用 async=true 时，要规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

    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();

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

    xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

XHR响应

如需获得来自服务器的响应，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

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

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;

异步回调onreadystatechange的相关属性

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    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/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

jQuery

可以参考：jQuery教程

简介

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。

jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

使用时，如果不希望下载并存放 jQuery进行本地引用，那么也可以通过 CDN（内容分发网络） 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

<!--Staticfile CDN:-->
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

语法

1. jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

   基础语法： $(selector).action()

   • 美元符号定义 jQuery

   • 选择符（selector）”查询”和”查找” HTML 元素

   • jQuery 的 action() 执行对元素的操作

2. 文档就绪事件

   为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

   $(document).ready(function(){
    
      // 开始写 jQuery 代码...
    
   });

   也可以简写为:

   $(function(){
    
      // 开始写 jQuery 代码...
    
   });

3. 选择器

   ​ jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。

   • 根据元素名

     $("p")

   • 根据id

     $("#test")

   • 根据class

     $(".test")

     其他的选择器可以查阅选择器

4. 事件

   在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

   页面中指定一个点击事件：

   $("p").click();

   下一步是定义了点击后触发事件。您可以通过一个事件函数实现：

   $("p").click(function(){ // 动作触发后执行的代码!! });

5. API手册

   jQuery API手册

6. 链

   允许在相同的元素上运行多条 jQuery 命令，一条接着另一条。

   $("#p1").css("color","red").slideUp(2000).slideDown(2000);
   // "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

操作DOM

基本的：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

更多请参考jQuery操作DOM

遍历

1. 祖先

   • parent()
   • parents()
   • parentsUntil()

2. 后代

   • children()
   • find()

3. 同胞

   • siblings()
   • next()
   • nextAll()
   • nextUntil()
   • prev()
   • prevAll()
   • prevUntil()

4. 过滤

   first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素

AJAX

所有AJAX方法参考jQuery AJAX 方法

load(URL,data,callback)方法

1. 作用

   load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

2. 语法

   $(selector).load(URL,data,callback)

   • 必需的 URL 参数规定您希望加载的 URL。

   • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

   • 可选的 callback 参数是 load() 方法完成后所执行的函数名称，回调函数可以设置不同的参数：

     • responseTxt - 包含调用成功时的结果内容
     • statusTXT - 包含调用的状态
     • xhr - 包含 XMLHttpRequest 对象

get() / post()

1. 作用

   jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

2. get()

   $.get(URL,callback)

   必需的 URL 参数规定您希望请求的 URL。

   可选的 callback 参数是请求成功后所执行的函数名。

   • 第一个回调参数存有被请求页面的内容

   • 第二个回调参数存有请求的状态

     $("button").click(function(){
       $.get("demo_test.php",function(data,status){
         alert("数据: " + data + "\n状态: " + status);
       });
     });

3. post()

   $.post(URL,data,callback)

   必需的 URL 参数规定您希望请求的 URL。

   可选的 data 参数规定连同请求发送的数据。

   可选的 callback 参数是请求成功后所执行的函数名。

   • 第一个回调参数存有被请求页面的内容

   • 第二个参数存有请求的状态

     $("button").click(function(){
         $.post("/try/ajax/demo_test_post.php",
         {
             name:"菜鸟教程",
             url:"http://www.runoob.com"
         },
         function(data,status){
             alert("数据: \n" + data + "\n状态: " + status);
         });
     });

ajax({name:value, … })

1. 作用

   ajax() 方法用于执行 AJAX（异步 HTTP）请求。

   所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

2. 语法

   $.ajax({name:value, name:value, ... })

   参数列表如下：

   名称	值/描述
   async	布尔值，表示请求是否异步处理。默认是 true。
   beforeSend(xhr)	发送请求前运行的函数。
   cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
   complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
   contentType	发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
   context	为所有 AJAX 相关的回调函数规定 “this” 值。
   data	规定要发送到服务器的数据。
   dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
   dataType	预期的服务器响应的数据类型。
   error(xhr,status,error)	如果请求失败要运行的函数。
   global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
   ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
   jsonp	在一个 jsonp 中重写回调函数的字符串。
   jsonpCallback	在一个 jsonp 中规定回调函数的名称。
   password	规定在 HTTP 访问认证请求中使用的密码。
   processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
   scriptCharset	规定请求的字符集。
   success(result,status,xhr)	当请求成功时运行的函数。
   timeout	设置本地的请求超时时间（以毫秒计）。
   traditional	布尔值，规定是否使用参数序列化的传统样式。
   type	规定请求的类型（GET 或 POST）。
   url	规定发送请求的 URL。默认是当前页面。
   username	规定在 HTTP 访问认证请求中使用的用户名。
   xhr	用于创建 XMLHttpRequest 对象的函数。

3. demo

   $("button").click(function(){
       $.ajax({url:"demo_test.txt",success:function(result){
           $("#div1").html(result);
       }});
   });

JSONP

1. 概念

   Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

   为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

   同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

2. demo

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title>JSONP 实例</title>
       <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
   </head>
   <body>
   <div id="divCustomers"></div>
   <script>
   $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
       
       var html = '<ul>';
       for(var i = 0; i < data.length; i++)
       {
           html += '<li>' + data[i] + '</li>';
       }
       html += '</ul>';
       
       $('#divCustomers').html(html); 
   });
   </script>
   </body>
   </html>