2018-09-29 工作日志

JavaScript AJAX jQuery JSP

AJAX

AJAX，异步的 JavaScript 和 XML，AJAX是一种在无需重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。

XMLHttpRequest 是 AJAX 的基础

XMLHttpRequest 对象用于在后台与服务器交换数据。

创建 XMLHttpRequest 对象（HXR）

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt?t=" + Math.random(),true);
xmlhttp.send();

两种提交方式——GET和POST

method为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。
当method为post时候，浏览器把form数据封装到http body中，然后发送到server。

注：
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT。

使用POST请求的情况

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

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

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

向请求添加 HTTP 头：

setRequestHeader(header,value)

其中

header: 规定头的名称
value: 规定头的值

enctype

enctype规定了对表单提交给服务器时表单数据编码的内容类型(Content Type)：
根据HTML5 规范中所叙述，enctype具有以下三种选项
pplication/x-www-form-urlencoded： 表单数据在发送前被编码为名称/值对：提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。这是标准的编码格式（默认的），JQuery 和 QWrap 的 Ajax，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。
multipart/form-data： 表单数据被编码为一条消息，页上的每个控件对应消息中的一个部分，在使用包含文件上传控件的表单时，必须使用该值（当没有传文件时，enctype会改回默认的application/x-www-form-urlencoded）。
text/plain：(H5规范新增的) 表单数据以纯文本形式进行编码，其中不含任何控件或格式字符。（空格转换为 "+" 加号，但不对特殊字符编码。）。按照键值对排列表单数据key1=value1\r\nkey2=value2，不进行转义。注意：若表单中有文件，则只留文件名。

注：
表单数据编码类型application/json，已经被W3C遗弃。即使使用了application/json，如果浏览器不支持，会替换成默认的MIME类型（application/x-www-form-urlencoded）。同理，其余的MIME类型，也不支持，均会替换成默认编码application/x-www-form-urlencoded。

一般来说，method和enctype是两个不同的互不影响的属性，但在传文件时，method必须要指定为POST，否则文件只剩下filename了。

关于MIME：
1.MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
2.MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

文件上传（有type=file控件）：
method要指定为 post（Browser会把form 数据封装到http body 后面），
enctype要指定为multipart/form-data；
Browsert会把表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)，Content-Type(默认为text/plain)，name(控件name)等信息，并加上分隔符(boundary)。

GET请求

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

open(method,url,async)其他参数说明

url - 服务器上文件的地址

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理

Async = true

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

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

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

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

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

AJAX - 服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获得来自服务器的响应

responseText 属性返回字符串形式的响应：

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

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

请求 books.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;

AJAX - onreadystatechange 事件

XMLHttpRequest 对象的三个重要的属性：

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

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        //onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
};

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction() {
    loadXMLDoc("ajax_info.txt", function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    });
}

一个Ajax例子

<html>
</html>

jQuery

jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。

jQuery对象与DOM对象之间的转换

<script>
function f1() {
    var dom = document.getElementById("d1");
    dom.innerHTML = "DOM对象";
    //$("#d1").innerHTML="jQuery对象";//jQuery对象不能使用DOM对象的方法
    //jQuery对象转DOM对象,使用jQuery自带的get()方法
    var $Obj = $("#d2");
    var DomObj = $Obj.get(0);
    DomObj.innerHTML = "jQuery对象转DOM对象";
    //DOM对象转jQuery对象
    var $jqObj = $(document.getElementById("d3"));
    $("#d3").css("color", "red");
}
</script>
<body>
    <div align="center">
        <div id="d1">d1</div>
        <div id="d2">d2</div>
        <div id="d3">d3</div>
        <div id="d4"></div>
        <div><input type="button" value="按钮" onclick="f1()"></div>
    </div>
</body>

jQuery的Ajax

当前的全局对象是一个对象时，开发人员不能为异步参数传递false

判断JavaScript对象为null或者属性为空
JS中的！=、== 、！==、===的用法和区别

参考文档：
http://www.cnblogs.com/moqiutao/p/7782270.html