Ajax相关学习内容整理.pdf

### Ajax相关学习内容整理 #### 1. Ajax简介 Ajax（Asynchronous JavaScript and XML）是一种能够在不需要重新加载整个页面的情况下，更新部分网页的技术。它通过在后台与服务器进行数据交换，能够实现异步数据更新。Ajax技术的核心是JavaScript中的`XMLHttpRequest`对象，用于在不重新加载页面的情况下，向服务器发送请求并接收响应。 #### 2. XMLHttpRequest对象的创建与使用 由于历史兼容性问题，`XMLHttpRequest`对象在不同浏览器中的支持情况不同。在IE5和IE6中，使用`ActiveXObject`来创建这个对象，而在其他现代浏览器中，则通过`window.XMLHttpRequest`来创建。使用此对象，可以实现浏览器与服务器间的异步通信。 ```javascript var xmlhttp; if(window.XMLHttpRequest){ // 现代浏览器 xmlhttp = new XMLHttpRequest(); } else { // IE浏览器 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ``` #### 3. 向服务器发送请求 通过`XMLHttpRequest`对象的`open()`方法和`send()`方法可以向服务器发送请求。`open()`方法的参数包括请求方式（GET或POST）、请求URL和一个表示请求是否异步的布尔值。`send()`方法用于发送请求，对于POST请求，还可以传递额外的数据。 ```javascript xmlhttp.open("GET", "text1.txt", true); xmlhttp.send(); // POST请求示例 xmlhttp.open("POST", "ajax_test.asp", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates"); ``` #### 4. AJAX的异步特性 Ajax请求默认是异步的。在异步模式下，当服务器响应准备就绪时，会触发`onreadystatechange`事件处理函数，该函数会检查`readyState`和`status`属性，来确定是否成功接收了服务器的响应。 ```javascript xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }; xmlhttp.open("GET", "text1.txt", true); xmlhttp.send(); ``` #### 5. AJAX服务器响应属性 Ajax响应有`responseText`和`responseXML`两个属性，分别用于获取字符串形式和XML形式的数据。如果服务器响应的是XML数据，可以通过`responseXML`属性获取XML对象，并进行进一步的解析。 ```javascript xmlDoc = xmlhttp.responseXML; // 之后可以解析xmlDoc对象 ``` #### 6. readyState事件处理 `readyState`属性指示XMLHttpRequest对象的状态。每当此属性值改变时，会触发`onreadystatechange`事件。在事件处理函数中，可以通过检查`readyState`和`status`属性来执行相应的逻辑。 #### 7. FormData与二进制文件上传 `FormData`对象用于序列化表单数据，用于异步传输。可以创建一个`FormData`对象，并且通过`append`方法添加数据，之后利用`XMLHttpRequest`的`send`方法发送。 对于二进制文件上传，需要设置请求头`Content-Type`为`multipart/form-data`，并将文件以二进制流的形式作为表单数据的一部分发送。 ```javascript var formData = new FormData(); formData.append("file", fileElement.files[0]); xmlhttp.open("POST", "upload.php", true); xmlhttp.send(formData); ``` #### 8. JSONP JSONP（JSON with Padding）是一种利用`<script>`标签跨域请求数据的方法。由于`<script>`标签的请求不受同源策略限制，因此可以通过动态创建`<script>`标签并设置`src`属性为远程资源的URL，来实现跨域数据获取。 #### 9. git命令相关内容整理 在git的使用中，涉及到版本控制的知识，如分支管理、版本提交、合并冲突解决等。以下是几个基本的git命令： - `git init`：初始化一个新的git仓库。 - `git clone`：克隆一个远程仓库到本地。 - `git add`：将文件添加到暂存区。 - `git commit`：提交暂存区的更改到仓库。 - `git push`：推送本地分支到远程仓库。 - `git pull`：从远程仓库拉取并合并到本地仓库。 在合并代码时，可能会遇到代码冲突，需要手动解决这些冲突后，再进行提交。 git命令的使用是为了管理源代码的版本，以及协同工作时的代码变更历史记录。通过分支管理和合并，可以有效地进行多人协作开发。