AJAX基础入门
来源:互联网 发布:贵阳大数据学校 编辑:程序博客网 时间:2024/06/05 13:28
Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
这是百度的摘录,进入正文。
这2天在看Head First,有一本ajax的书,看了看觉得适合新手,图文并茂,生动形象。
从这本书我学到了什么呢?他里面一部分在讲ajax 一部分在讲JavaScript结合ajax实现一些表单验证类的,这些东西我就直接跳过了。
Ajax最最最主要的api也就是XMLHttpRequest建立请求发送到服务端
分为几个步骤:首先得到XMLHttpRequest对象,然后为对象的几个重要属性赋值,分别为
request.open("GET",url,true);
request.onreadystatechange = 函数名
request.send(null);
1.首先就是open,顾名思义开放,需要3个参数,第一个是请求方式,这里先讲“GET”,然后是url,你请求到后台服务器的一个连接地址,比如checkUser.jsp?username = escape(.....);
就是一段get请求就对了,escape是js特别处理参数,防止乱码。然后就是第三个参数boolean值,true代表开启异步请求,反之。(不知道异步的为什么要学ajax,先了解异步去)
2.然后就是onreadystatechange指定一个函数,就是一个回调函数,这里下面重点讲
3.最后就是send的了,一般get请求send都是传个null,它在post请求下比较常用
这里插入一个知识点,ajax异步请求服务器,服务器会分阶段告诉浏览器处理结果,一般分为4个阶段,每个阶段都会调用onreadystatechange的方法,所有在下面处理服务器返回结果是应该注意。
Ajax请求服务器返回四个阶段:
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
百度上查找的资料说有5个阶段,但是我认为0阶段还未涉及要服务器交互所以不说。
那么我们就要通过判断阶段来分别处理回调函数。
这里有一小段代码
if(request.readyState==4){
if(request.status==200){
....
}
}
这段代码我放在回调函数里,判断当处理阶段达到4时候才进行交互,并且要判断服务器返回状态是否为200,至于状态码自行百度。
不信有这几个阶段的朋友可以在第一个if里加一个alert语句去判断一下QAQ。。。。
然后ajax基本就完了。还有就是一个post请求。
那么post请求要怎么写呢?
1.request.open("GET",url,true); 把第一个参数改为POST
2.把url直接的参数改为直接一个地址就行不要带参数,比如上面的改为checkUser.jsp
3.然后要自己拼装一个参数
比如:var requestParam = “username=’+escsap(username) +”&password=”+escape(password);
4.然后把数据放在send里send(requestParam);
5.然后要为post请求提交一个header数据 content-type你发送什么数据就设置什么数据。setRequestHeader("Content-Type","
application/x-www-form-urlencoded")
然后没了。
接下来讲一下request接收回来的数据类型
Responsetext responseXML 一般就是服务端直接返回一段文本,或者返回xml,现在更流行json
在js里利用JSON.parse(object)解析JSON。不过书里写的是利用eval方法去计算得到对象。eval("("+responseText+")");
在服务端怎么返回json,以java为例,需要第三方jar包支持
那么在js中又如何使用json数据呢
For(var obj in object){
Alert(object[obj]);
}
obj是json对象里的属性名字,通过访问object[obj]得到属性值,那么如何访问是数组的属性值,head first里有一段代码提供,我自己也没去测试,这里贴一下
然后这里是ajax适配浏览器的代码,看看就行 现在好多框架工具包都有优化,比如jquery
下面是我springmvc写的一个方法测试ajax的。
- 【AJAX】AJAX入门基础
- Ajax基础入门
- 温故Ajax入门基础
- Ajax基础入门
- AJAX入门基础
- AJAX基础入门
- Ajax入门基础01
- ajax基础入门
- 一、ajax基础语法使用(Ajax入门)
- AjAX基础入门级代码
- 白话 Ajax 及其入门基础
- 细说Ajax 及其入门基础
- ajax 新建对象 基础入门
- ajax入门 ajax使用方式2-ajax基础
- Ajax快速入门之http协议基础
- Ajax快速入门之HTTP协议基础
- 白话 Ajax 及其入门基础(1)
- 白话 Ajax 及其入门基础(2)
- java定义二维数组的几种写法(转)
- Python学习-安装
- NPOI使用手册
- Java虚拟机详解----JVM常见问题总结
- TensorFlow的卷积神经网络例子解析
- AJAX基础入门
- iOS 阿里百川SDK 报错 "_OBJC_CLASS_$_CMMotionManager", referenced from: objc-class-"_res_9_getservers", ref
- 产品经理必知会的时间管理术
- 任务
- 依赖注入ButterKnife
- TCP(传输控制协议)
- 自学宝典:10个学习Android开发的网站推荐
- 4.4
- XMPP学习4-发现世界