AJAX基础
来源:互联网 发布:js 数组重新排序 编辑:程序博客网 时间:2024/06/06 05:55
AJAX基础
一、HTTP协议
1、概念
超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
<form action="#" method="post" enctype="application/x-www-form-urlencoded"> <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit" value="提交"></form><script> /* B/S browser/server C/S client/server HTTP协议: 1.请求协议 浏览器向服务器发送请求的时候使用 请求行:访问的路径,主机,协议版本 请求头:浏览器的一些信息 请求体:get请求没有请求体 post请求才有请求体 !!! get 和 post 的区别 get请求: 没有请求体。 get请求如果想向服务器传递数据,必须把要传递的数据放入到 **url** 中。 请求数据是键值对的形式,建和值用=连接 post请求: 有请求体。而且我们的数据都是通过请求体提交的数据 2.响应协议 服务器向浏览器响应的时候使用 响应行 响应头 响应体(响应的内容) 响应码: 200 ok 304 Not Modified 404 资源没找到 500 服务器问题 */</script>
二、Ajax基础
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面,在加载新的网页的过程中,用户会有一个等待。降低了用户体验。局部更新: AJAX的出现就可以让网页进行部分更新。异步和同步: Ajax的全称是Asynchronous JavaScript+XML ,Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。Ajax结合了异步技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Js技术的Web应用,并打破了使用页面重载的惯例。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加载,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。 Ajax刚出生的时候,用的比较多的数据格式是XML,后来JSON数据格式更多的去替换了XML格式的数据。
Ajax的使用方法
▻ 先创建需要请求的页面. (test.html)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>测试!!!</body></html>
▻ Ajax请求(test.html)的方法
<div id="box"></div><script>//第一步:创建XMLHttpRequest对象 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//第二步:调用xhr的open 仅仅是准备一些信息,但是还没有实际的发送请求出去 //参数1:请求方法,一般是get或post 参数2:请求url 参数3:是否为异步,默认true,表示异步 xhr.open("GET","test.html");//第三步:监听请求状态 //xhr.onreadystatechange监听请求状态,根据状态来确定数据获得之后要做的事情 xhr.onreadystatechange = function () { console.log(xhr.readyState); /* * xhr.readyState的值保存了xhr的状态。一共有5种状态,每个状态用1个整数来表示 * 0 未初始化。对象new出来了,但是还没有调用open方法 * 1 启动。 已经调用open,但是还没有调用send方法 * 2 发送。 已经send方法,但是还没有接收到相应 * 3 接收。 已经开始接收数据,但是还没有完全接收 * 4 完成。 已经完全接收数据 * * 作为开发者,我们一般只关注 **第4种** 状态 * */ if(xhr.readyState == 4){ //这次响应完成 console.log(xhr.status);//200 这次响应的内容是OK的 if(xhr.status == 200){ console.log(xhr.responseText); //输出这次响应的内容 box.innerHTML = xhr.responseText; //页面中输出这次响应的内容 } } }//第四部:发送请求,参数表示传递到服务器的数据。get给个null即可,post请求的时候,传递键值对数据 xhr.send(null);</script>
请求json数据
▻ 先创建需要请求的json数据. (data.json)
{ "name" : "Jack", "age" : 20, "sex" : "man"}
▻ Ajax请求(data.json)数据的方法
<script> var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET","data.json"); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ var obj = JSON.parse(xhr.responseText); console.log(obj); //{name: "Jack", age: 20, sex: "man"} } } } xhr.send(null); /* * json JavaScript Object Notation 是一种纯文本数据格式,而且是跨平台的 * * json对象: 其实就是js对象字面量去掉方法 * { * "name" : "Jack", * "age" : 20, * } * * json数组:[ ] * 可以存json对象和字符串 * */</script>
阅读全文
1 0
- Ajax 基础
- Ajax基础
- Ajax基础
- AJAX基础
- AJAX基础
- ajax基础
- ajax基础
- Ajax 基础
- ajax基础
- AJAX基础
- AJAX 基础
- Ajax基础
- Ajax基础
- AJAX 基础
- ajax基础
- AJAX基础
- Ajax基础
- Ajax基础
- 修改Dreamweaver编辑器颜色样式(代码颜色)
- oozie
- Ajax 提交表单方式
- 【Ac自动机 查询是否存在一个字典中的字符串】hihocoder 1036 Trie图
- Spring Security中<@security.authorize的使用
- AJAX基础
- (二)核心注解介绍
- ACM第六次比赛题目及标准程序(动态规划)
- 查询线段树 Balanced Lineup POJ
- 三种简单排序用java实现(选择排序,冒泡排序,插入排序)
- hadoop 配置HA 重新格式化后 datanode 起不来
- hdu6146 递推
- ACM集训日记-8月23日
- Linux重点知识整理