`

Ajax小结

阅读更多

①定义: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小结** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,...

    JavaScript jquery及AJAX小结

    其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点,下面就来写一下我的总结。...

    ajax异步请求小结

    **Ajax异步请求小结** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验,...

    Ajax乱码小结

    ### Ajax乱码问题详解 #### 一、Ajax乱码概述 在使用Ajax技术进行前后端交互的过程中,常常会遇到字符编码的问题,特别是当涉及到中文或其他非ASCII字符时,容易出现乱码现象。根据题目中的描述,“Ajax乱码:当...

    Jquery操作Ajax方法小结

    jQuery是一个快速、小巧的JavaScript库,它封装了JavaScript的动画效果和Ajax等技术,简化了这些技术在使用时的操作。在现代Web开发中,AJAX技术用于实现页面的异步更新,jQuery通过提供的一系列AJAX相关方法,极大...

    AJAX编写用户注册实例及技术小结

    AJAX允许我们在不刷新整个页面的情况下,与服务器进行异步通信,提升用户体验。下面将详细解释相关知识点。 1. **AJAX基本原理**: AJAX的核心是创建XMLHttpRequest对象(在本例中是`http`变量),它负责在后台与...

    JavaEE5学习笔记12-JSF集成AJAX使用经验总结

    ### JavaEE5学习笔记12-JSF集成AJAX使用经验总结 #### 1. JSF (JavaServer Faces) 概览 JavaServer Faces (JSF) 是 Java EE 的一个重要组成部分,它提供了一种构建用户界面的组件框架。JSF 允许开发者创建可重用的...

    Ajax基础教程(扫描版)

    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和AJAX技术实现的简单聊天室。JSP(JavaServer Pages)是用于创建动态网页的技术,它允许开发者在HTML代码中嵌入Java代码,...

    ASP.NET AJAX实战源码

    第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

    【卷一/共两卷】AJAX实战pdf高清版90M

    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...

    ajax基础教程文档

    **4.10 小结** - **总结要点:** - Ajax技术可以应用于多种场景。 - 掌握基本的Ajax实现方式,如动态加载内容、表单验证等。 - 理解与服务器通信的基本原理。 #### 五、构建完备的Ajax开发工具箱 **5.1 使用...

    html表单a标签,input标签等几种请求ajax提交数据给后台小结

    这两种方法的核心在于使用`<input type="button">`或`<a>`标签的`onclick`事件来触发AJAX请求,并且通过JavaScript获取表单中的数据,将其转换为JSON格式,然后发送到服务器端。这种方法不仅提高了页面的交互性,还...

    AJax与Jsonp跨域访问问题小结

    AJAX与JSONP跨域访问问题小结 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过使用XMLHttpRequest对象来与服务器进行异步通信。XMLHttpRequest对象...

    AJAX入门

    #### 六、小结 通过本篇文章的学习,我们了解了AJAX的基本概念以及如何使用`XMLHttpRequest`对象来发送和接收数据。掌握这些基础知识对于前端开发者来说是非常重要的,因为它可以帮助我们在不刷新页面的情况下实现...

    J2EE SSH Ajax宝典

    2.5 小结 本章通过实例展示了Ajax在J2EE环境中如何提升应用性能和用户体验,为后续章节的SSH框架与Ajax的整合打下了基础。 通过以上内容,读者将对J2EE环境下的Ajax应用有深入的理解,并能够运用这些知识创建更高效...

    Ajax的小贴士使用小结

    以下是一些关于Ajax使用的小贴士: 1. **选择JavaScript库**:在进行Ajax开发时,使用合适的JavaScript库可以极大地简化工作。常见的库包括: - **YUI (Yahoo! User Interface Library)**:由雅虎开发,提供了丰富...

Global site tag (gtag.js) - Google Analytics