前言

这次总结的是ajax技术不是asp.net ajax框架。ajax与传统的web开发的区别在于ajax只需在一个页面操作不用页面间的跳转,其实就是异步和局部刷新。以下主要对XMLHttpRequest对象,DOM,javaScript的三方面进行总结。

理解

(一)xmlHttpRequest

XMLHttpRequest的五步使用法:
1. 建立request连接
2. 服务端准备回调方法
3. 客户端设置参数
4. 开始交互
5. 检查结果

1.创建XMLhttprequest对象

if(window.XMLHttpRequest){
    //IE7,IE8,FireFox,Mozilla,Safari,Opera
    xmlhttp = new XMLHttpRequest();
    ...
}else if(window.ActiveXObject){
    //IE6,IE5,IE5.5
    ...
}
if(xmlhttop == undefind || xmlhttp == null){
    alert("当前浏览器不支持创建XMLHttpRequest对象");
    return;
}

2.注册回调方法

xmlhttp.onreadystatechange = callback;

3.设置和服务器端交互的响应参数(get)

var userName = document.getElementById("UserName").value;

//true表示异步交互
xmlhttp.open("GET","AJAX?name=" + userName,true);

4.设置向服务层发送的数据,启动和服务器端的交互(get)

xmlhttp.send(null);

3.设置客户端参数(post)

xmlhttp.open("POST","AJAX",true);

//post方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-ww-form-urlencoded");

4.开始交互(post)

xmlhttp.send("name=" + userName);

5.判断和服务端的交互是否完成,还要判断服务端是否正确返回了数据

function callback(){
    if(xmlhttp.readyState == 4){
    //表示和服务端的交互已经完成
        if(xmlhttp.status == 200){
        //表示服务器的响应代码是200,正确返回了数据
        var message = xmlhttp.responseText;
        //纯文本数据的接受方法
        //使用的前提是,服务器端需要设置content-type为text/xml
        //xml数据对应的DOM对象的接受方法
        // var DomXML = xmlhttp.responseXML;

        //向div标签中填充文本内容的方法
        var div = document.getElementById("message");
        div.innerXML = message;
}
}
}

(二) DOM

DOM(Document Object Model)文档对象模型, 可以使我们在ajax中通过JavaScript代码对html和xml数据进行dom方式的操作,从而做到页面的动态修改更新和数据的提取处理。
XPATH(XML Path Language)
分三种:
1.查找元素节点 用@

//关键是先找到包含属性节点的元素节点
//绝对路径
var isdn1 = selectNodes(rootElement,"/books/book/@isdn");
//相对路径
var isdn2 = selectNodes(rootElement,"book/@isdn");
//全文搜索
var isdn3 = selectNodes(rootElement,"//books/book/@isdn");

2.查找文本节点 用text()

//关键是找到包含文本节点的那个元素节点
var text1 = selectNodes(rootElement,"/books/book/name/text()");

3.有条件的查找元素节点

var book1 = selectNodes(rootElement,"/books/book[@isdn]");

(三) javaScript

1.对数组的操作

var array1 = new Array(1,2,3);
var array2 = [2,3,4];

1.添加、删除(从尾部开始)

array1.push(4,5,[6,7]);
array1.pop();

2.添加、删除(从头开始)

array1.unshift(100,101);
array1.shift();

3.添加删除(任意位置)

var spliceArray1 = arrary1.splice(4,2);//从下标为4的元素开始删除2个
var spliceArray1 = arrary1.splice(4);//从下标为4的元素开始删除直到末尾的所有元素
array1.splice(1,0,100,101);//从小标为1的元素开始删除0个元素,并在下标为1的元素前添加100,101

4. 不改变原数组的基础上追加

//concat 用于数组的连接或合并,原数组内容不会改变
var array3 = arrary1.concat(7,8);

5.把各元素连接成字符串

//join,将元素按照指定的分隔符连接成字符串输出
var array3 = array1.join("");
//把元素按字符串输出 121212
var array3 = array1.join("+");//1+2+1+2+1+2

6. 查部分元素

//slice,返回当前数组的子数组,原数组内容不变
var array3.array1.slice(0,3);
//从小标0开始到小标3之前的元素返回成一个新的数组,注意下标3的元素取不到
var array3.array1.slice(4);
//从下标4开始到末尾
var array3 = array1.slice(-2,-1);
//从倒数第二个到倒数第一个

7.查出排好序的元素

array1.sort();//按字母序升序
array1.sort(function(a,b){
    return a - b;
});
//按数值大小升序排列。如果返回的是一个负数,则a就出现在b的前面

8.查出倒序的元素

array1.reverse();

2.json拼接示例

builder.append("({");
Iterator<String> iter = stocks.keySet().iterator();
//iterator是迭代器
while(iter.hasNext()){
    String sid = iter.next();
    Stock stock =Stocks.get(sid);
    builder.append(sid).append(":{yes:").append(stock.getYesterday()).append("}")
}
builder.append("})");

3.eval 反射

//反射创建对象的方法
//第一个参数是类名
//第二个参数是创建对象需要的所有参数组成的数组
function reflect(className,args){
    try{
        //如何把字符串类型的className转换成对应的一个函数
        var rClass = eval(className);
        //创建对象需要的所有参数在一个数组里面["1","2"]
        //最终我们调用new创建的时候,参数表的写法应该("1","2")
        var oargs = args.join(",");
        var obj = new rClass(oargs);
        return obj;
}catch(e){
        return null;
}
}

结语

什么是AJAX? Asynchronous,JavaScript,And XML的首字母简写。其实,AJAX就是对JavaScript 和 XML的综合再添上异步。在AJAX技术涉及的这三块中,DOM是关于html的也算是关于XML的吧,XMLHttp|Request是关于XML的,再加上javascript这一块,显而易见,ajax没有自己的东西。

【AJAX】AJAX小结二的更多相关文章

  1. html5使用canvas实现弹幕功能示例

    这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下

  2. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. ios – parse.com用于键,预期字符串的无效类型,但是得到了数组

    我尝试将我的数据保存到parse.com.我已经预先在parse.com上创建了一个名为’SomeClass’的类.它有一个名为’mySpecialColumn’的列,其数据类型为String.这是我尝试使用以下代码保存数据的代码:如果我运行这个我得到:错误:密钥mySpecialColumn的无效类型,预期字符串,但得到数组这就是我在parse.com上的核心外观:有谁知道我为什么会收到这个错误?

  5. ios – 上下文类型’NSFastEnumeration’不能与数组文字一起使用

    斯威夫特3,你会这样做吗?解决方法正如您所发现的,您不能使用as-casting将数组文字的类型指定为NSFastEnumeration.您需要找到一个符合NSFastEnumeration的正确类,在您的情况下它是NSArray.通常写这样的东西:

  6. ios – 获取资产目录文件夹中所有图像的数组

    在iOS中,是否可以获取资产目录文件夹中的图像数组?我不确定为什么会对此进行投票.我真的不知道从哪里开始.我的另一种方法是创建文件夹中所有文件的plist,但它似乎是多余的.我无法添加任何代码,因为我会添加什么?

  7. ios – 来自调试器的消息:由于内存问题而终止

    我的应用程序使用Geojson文件.我使用MapBoxSDK将MGLpolyline添加到地图中.但问题是我的文件太大,以至于应用程序崩溃并收到错误:来自调试器的消息:由于内存问题而终止.我在第一次循环时面对66234个对象.我试图将数组块化为新数组,但没有成功.请帮我解决问题.这是我在地图上绘制的代码,这里是我的testprojectongithubuseXcode8.1如果有任何不同的第三方可

  8. ios – Swift – 使用字典数组从字典访问数据时出错

    我有一个非常简单的例子,说明我想做什么基本上,我有一个字典,其值包含[String:String]字典数组.我把数据填入其中,但当我去访问数据时,我收到此错误:Cannotsubscriptavalueoftype‘[([String:String])]?’withanindexoftype‘Int’请让我知道我做错了什么.解决方法您的常量数组是可选的.订阅字典总是返回一个可选项.你必须打开它.更

  9. ios – 在Swift中使用“Map”创建两个数组的超集

    假设我有两个数组:我想组合两个数组,以便我得到一个输出我该怎么做呢?

  10. ios – 基于一个对象内的一个值,根据一个值对NSObject数组进行排序

    我创建了一个对象,它看起来像这样然后将其添加到可变数组.稍后,我计算出每个对象到当前gps位置的距离,并将其添加到对象中并将其放回到数组中.我现在需要根据aOffice.distance的值对该数组进行排序,但不知道该怎么做请有人帮帮我谢谢解决方法

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部