①定义:AJAX是一种快速创建动态网页的技术
传统的网页如果需要更新内容,必需重载整个网页面,而ajax通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
(不需要任何浏览器插件,但需要用户允许javascript在浏览器上执行)
②部分更新实用例子:有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图和qq点赞等。
③向服务器发送请求时需要规定:规定请求的类型、URL和具体数据data
method:请求的类型有GET 或 POST(通过 POST 读取的页面不被缓存)
区别:(1)Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求
(2)GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和 密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说可以避免这些问题
所以GET请求常在搜索时应用(例如现代浏览器搜索信息时,你所搜索的内容会附加在URL后面),而POST请求常用于修改用户密码隐私信息时应用。
data:发送到服务器的数据
注释::如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。对象必须为key/value格式
url:服务器上文件的地址,可以是任何类型的文件,比如.txt,或者服务器脚本文件,如.php(在传回响应之前,能够在服务器上执行文件)
js:绑定和处理所有数据;
DOM:实现动态显示和交互
④服务器响应:请求成功后的回调函数,有两个参数
(1)由服务器返回,并且根据dataType参数进行处理后的数据
(2)描述状态的字符串
function(data) { //data可能是html、text等 this;//调用本次Ajax请求时传递的options参数 }
⑤jQuery ajax post例子:
$(document).ready(function(){ $.ajax({ //提交数据的类型 POST/GET type:"POST", //提交的网址 url:"add", //提交的数据 data:{name:"name"}, //成功返回之后调用的函数 success:function(data){ $(".add:focus").siblings('.num').text(data) //接受返回数据反映到页面 } //调用出错执行的函数 error: function(){ //请求出错处理 } }); }); //url (String) 请求的HTML页的URL地址 //data (Map)(可选参数) 发送至服务器的 key/value 数据
在jquery的ajax函数中,可以传入3种类型的数据
(1)文本(2)json对象(3)json数组
⑥dataType类型:
指定返回的数据类型。该属性值可以为:xml:返回XML文档,可使用jQuery进行处理
html: 返回HTML字符串
script: 返回JavaScript代码,不会自动缓存结果。除非设置了cache参数
json: 返回JSON数据,JSON数据将使用语法进行解析(属性名必须加双引号,所有字符串也必须用双引号),如果解析失败将抛出一个错误。从jQuery 1.9开始,空内容的响应将返回null或{}
text: 返回纯文本字符串
相关推荐
**Ajax小结** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,...
其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点,下面就来写一下我的总结。...
**Ajax异步请求小结** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验,...
### Ajax乱码问题详解 #### 一、Ajax乱码概述 在使用Ajax技术进行前后端交互的过程中,常常会遇到字符编码的问题,特别是当涉及到中文或其他非ASCII字符时,容易出现乱码现象。根据题目中的描述,“Ajax乱码:当...
jQuery是一个快速、小巧的JavaScript库,它封装了JavaScript的动画效果和Ajax等技术,简化了这些技术在使用时的操作。在现代Web开发中,AJAX技术用于实现页面的异步更新,jQuery通过提供的一系列AJAX相关方法,极大...
AJAX允许我们在不刷新整个页面的情况下,与服务器进行异步通信,提升用户体验。下面将详细解释相关知识点。 1. **AJAX基本原理**: AJAX的核心是创建XMLHttpRequest对象(在本例中是`http`变量),它负责在后台与...
1.8 小结 21 第2章 使用xmlhttprequest对象 23 2.1 xmlhttprequest对象概述 23 2.2 方法和属性 25 2.3 交互示例 26 2.4 get与post 28 2.5 远程脚本 29 2.5.1 远程脚本概述 29 2.5.2 远程脚本的示例 29 2.6 ...
【标题】:“一个简单的jsp聊天室(ajax技术)” 在这个项目中,我们探索了一个基于JSP和AJAX技术实现的简单聊天室。JSP(JavaServer Pages)是用于创建动态网页的技术,它允许开发者在HTML代码中嵌入Java代码,...
第4章 Ajax服务器扩展剖析 86 4.1 ASP.NET开发人员的Ajax 86 4.2 改进原有ASP.NET网站 87 4.2.1 一个示例ASP.NET网站 88 4.2.2 配置现有的ASP.NET网站 88 4.3 ScriptManager: Ajax页面的大脑 90 ...5.5 小结 145
1.5 小结 1.6 资源 第2章 Ajax新手上路 2.1 Aiax的关键元素 2.2 用JavaScript改善用户体验 2.3 用CSS定义应用的外观 2.3.1 CSS选择器 2.3.2 CSS样式属性 2.3.3简单的CSS例子 2.4 用DOM组织视图 2.4.1 使用JavaScript...
**4.10 小结** - **总结要点:** - Ajax技术可以应用于多种场景。 - 掌握基本的Ajax实现方式,如动态加载内容、表单验证等。 - 理解与服务器通信的基本原理。 #### 五、构建完备的Ajax开发工具箱 **5.1 使用...
这两种方法的核心在于使用`<input type="button">`或`<a>`标签的`onclick`事件来触发AJAX请求,并且通过JavaScript获取表单中的数据,将其转换为JSON格式,然后发送到服务器端。这种方法不仅提高了页面的交互性,还...
AJAX与JSONP跨域访问问题小结 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过使用XMLHttpRequest对象来与服务器进行异步通信。XMLHttpRequest对象...
#### 六、小结 通过本篇文章的学习,我们了解了AJAX的基本概念以及如何使用`XMLHttpRequest`对象来发送和接收数据。掌握这些基础知识对于前端开发者来说是非常重要的,因为它可以帮助我们在不刷新页面的情况下实现...
以下是一些关于Ajax使用的小贴士: 1. **选择JavaScript库**:在进行Ajax开发时,使用合适的JavaScript库可以极大地简化工作。常见的库包括: - **YUI (Yahoo! User Interface Library)**:由雅虎开发,提供了丰富...