AJax技术

AJAX学习札记

字号+ 作者:H5之家 来源:H5之家 2015-10-21 12:15 我要评论( )

AJAX学习笔记 1.基于标准的一些好习惯 1.1 标签名要小写 1.2 标签必须关闭 1.3 属性名必须小写 2. 2.1 ajax下不需要使用表单来进行数据提交,因此不用写表单标签 2.2 aiax方式不需要name属性,需要一个id属性 2.3 id属性的定义dom的方式找到某个节点,进行操

AJAX学习笔记

1.基于标准的一些好习惯
1.1 标签名要小写
1.2 标签必须关闭
1.3 属性名必须小写

2.
2.1 ajax下不需要使用表单来进行数据提交,因此不用写表单标签
2.2 aiax方式不需要name属性,需要一个id属性
2.3 id属性的定义dom的方式找到某个节点,进行操作
2.4 div和span的直观差异,div中的内容独占行,span中的内容和前后其它内容相处良好

3. AJAX中javasript里函数的功能
3.1 获取文本框中的内容
3.2 将文本框中的数据发送给服务器端的servlet
3.3 接收服务器端返回的数据
3.4 将服务器但返回的数据动态的显示在页面上

4.

//定义用户名校验的方法 functon verify() { //1.获取文本框的内容 //Jquery的查找节点的方式:参数中#加上Id属性值可以找到一个节点 //jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法 var jqueryObj = $("#userName"); //获取节点的值 var userName = jqueryObj.val(); //2.将文本框中的数据发送给服务器端的servlet //使用jquery的XMLHTTPrequet对象get请求的封装 $.get("AJAXServer?name="+userName,null,callback); } //回调函数 function callback(data) { //3.接收服务器返回的数据 //4.将服务器端返回的数据动态的显示在页面上 //找到保存结果信息的节点 var resultObj = $("#result"); //动态的改变页面中div节点的内容 resultObj.html(data); }

??

5.verify函数的精简形式

function verify() { $.get("AJAXServer?name="+$("#userName").val(),null,function(data){ $("#result").html(data); }) }

?

6.常用框架
dojo?DWR ?ewt?mootools??prototype & script.aculo.us?rico

7. 使用XMLHTTPRequest对象进行AJAX的异步交互
?

function verify(){ //7.1 使用dom的方式获取文本框中的值,document.getElementById("userName")是dom中获取元素节点的一种方法,一个元素节点对应的HTML页面标签,value可以获取一个元素节点的value属性值 var userName = document.getElementById("userName").value; //7.2 创建XMLHttpRequest对象,这是XMLHttpRequest对象使用中最复杂的一步,需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码。 if(window.XMLHttpRequest) { //7.3 针对FireFox,Mozillar,Opera,Safari,IE7,IE8 var xmlhttp = new XMLHttpRequest(); //7.4 针对某些特定版本的mozillar浏览器的BUG进行修正 if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject){ //7.5 针对IE6,IE5.5,IE5两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中排在前面的版本较新 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i=0;i<activexName.length;i++){ try{ //7.6 取出一个控件名称进行创建,如果创建成功就终止循环如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建 var xmlhttp = new ActiveXObject(activexName[i]); break; } catch(e){ } } } //7.7 确认XMLHttpRequest对象创建成功 if(!xmlhttp){ alert("XMLHttpRequest创建失败!!"); return; }

?

8. AJAX应用的五个步骤
8.1 建立XMLHttpRequest对象
8.2 设置回调函数
8.3 使用open方法与服务器建立链接
8.4 向服务器端发送数据
8.5 在回调函数针对不同响应状态进行处理

9. AJAX需要注意的内容
9.1 不同浏览器下XMLHttpRequest对象的不同的建立方式
9.2 设置回调函数是不要加括号
9.3 open方法三个参数含义,此外还需要注意GET方式和POST方式服务器端地址的不同写法
9.4 GET方式和POST方式send的参数的不同之处,以及POST方式下send之前需要设置请求头信息的工作
9.5 如何判断正确的响应数据已经返回,此外还要注意如何获取响应数据内容

?

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评