LT
编程
Echarts
Python
Django
HTML
MySQL
Java
读书
电影
日常闲聊
计划表
搜索
登录
ajax 的基本知识
日期: 2019/08/25
作者:
longtao
分类:
HTML
阅读: 602
## ajax 的基本知识 AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 ## ajax 在JavaScript中的使用步骤 ### 1. 首先创建XMLHttpRequest对象 有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 ```javascript var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } ``` ### 2. 向服务器中发送请求 ```javascript xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); ``` `open(method,url,async)`: - method: 请求的类型 GET 或者 POST - url:请求的地址 - async: 是否异步 true:异步 false:同步 `send(string)`: 将请求发送到服务器。 - string: 仅用于POST请求 **GET 还是 POST?** - 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求: - 无法使用缓存文件(更新服务器上的文件或数据库) - 向服务器发送大量数据(POST 没有数据量限制) - 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 #### 发送Form表单 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据: ```javascript 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: 规定头的值 ### 3. 服务器的响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 - responseText: 以字符串的形式响应数据 - responseXML:以XML的形式响应数据 **responseText属性** 如果来自服务器的响应并非 XML,请使用 responseText 属性。 responseText 属性返回字符串形式的响应,因此您可以这样使用: ```javascript document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ``` **responseXML 属性** 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性: ```javascript 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; ``` ### 4. onreadystatechange 事件 当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性: - `onreadystatechange`: 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 - `readyState`: 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 - 0: 请求未初始化 - 1: 服务器连接已建立 - 2: 请求已接收 - 3: 请求处理中 - 4: 请求已完成,且响应已就绪 - `status`: 状态 - 200: "OK" - 404: 未找到页面 示例: ```javascript xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } ``` **回调函数** 回调函数是一种以参数形式传递给另一个函数的函数。 如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同): ```javascript function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } ``` ### 5. jQuery下的ajax语法 使用 AJAX 请求改变 `<div>` 元素的文本: ```javascript $("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); }); ``` ajax() 方法用于执行 AJAX(异步 HTTP)请求。 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。 **ajax中选项** ```javascript $.ajax({name:value, name:value, ... }) ``` 该参数规定 AJAX 请求的一个或多个名称/值对。 名称 | 值/描述 :-- | :-- `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 对象的函数。
网站名称:
刘龙韬的博客
本文链接:
www.liulongtao.com/aritcle/14
版权声明:
未经允许,禁止转载!
相关文章:
上一篇:
CSS选择器
下一篇:
Python的time模块简介
提交评论
提交评论
评论列表
共有0评论
×
回复留言
回复评论:
评论内容:
昵称:
邮箱:
评论内容:
目录
最新文章
原码、反码与补码的基础内容
剑指offer之找到第一个公共节点
剑指offer之平衡二叉树
Docker 虚拟化技术
剑指offer之打印二叉搜索树中第k小的结点
分类
编程 (11)
读书 (0)
电影 (0)
日常闲聊 (2)
Echarts (2)
Python (5)
杂七杂八 (2)
Django (5)
HTML (2)
MySQL (1)
计划表 (1)
Java (2)
标签
Git (1)
vscode (1)
Echarts (2)
Python (10)
Django (6)
网站测试 (1)
MySQL (2)
HTML (2)
日常计划 (2)
java (2)
Spring Boot (2)
各种派 (1)
研究生的日常 (2)
算法 (5)
Java (5)
计算机基础 (2)
碎碎念 (0)
共有0评论