当前位置:首页 > 资讯 > info5 > 正文

[JS]笔记16_AJAX1基本请求过程

发表于: 2016-11-07   作者:express_yourself   来源:转载   浏览:
摘要: AJAX–>阿贾克斯了解WAMP的主要作用是什么WAMP:WindowsApacheMySqlPHP的缩写WAMP是一个集成环境,对前端而言:集成了后台语言PHP环境和数据库MYSQL能够将一台计算机变成web服务器方便开发者在真正的服务器环境进行测试一、JSON与XML1、JSON与XML都是常见的数据格式JSON(JavaScriptObjectNotation)轻量级数据格式XML是一种可扩

AJAX–>阿贾克斯

了解WAMP的主要作用是什么
WAMP:Windows Apache MySql PHP的缩写
WAMP是一个集成环境,对前端而言:
集成了后台语言PHP环境和数据库MYSQL
能够将一台计算机变成web服务器
方便开发者在真正的服务器环境进行测试

一、JSON与XML

1、JSON与XML都是常见的数据格式
JSON(JavaScript Object Notation)轻量级数据格式
XML是一种可扩展标记语言,与HTML都是标记语言

2、JSON的优势:
轻量级,体积小,节省流量,提高加载速度
解析成原生JS对象,解析比XML更快
查找数据无需查找标签,更快

3、JSON常见形式: json对象&json数组

4、JSON转换方法

在数据传输流程中,json是以文本即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符

串之间的相互转换是关键
JSON字符串: var str1 = ‘{ “name”: “cxh”, “sex”: “man” }’;
JSON 对 象: var str2 = { “name”: “cxh”, “sex”: “man” };
//由JSON字符串转换为JSON对象
方法一. var obj = eval(‘(’ + str1 + ‘)’); // js内建方法
方法二. var obj = str1.parseJSON();
方法三. var obj = JSON.parse(str1);//需严格的json格式{ “name”: “cxh“}
//将JSON对象转化为JSON字符串
方法一. var obj2=str2.toJSONString();
方法二. var obj2=JSON.stringify(str2);

二、AJAX是什么

  • AJAX = Asynchronous JavaScript And XML
    ( AJAX = 异步 JavaScript 和 XML)
  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
  • 通俗的讲,AJAX就是JS通过一个网址去加载数据,这个过程通常是用户不可见的 传统的网页(不使用 AJAX)如果需要更新内容,必需重新加载整个网页

    • 异步加载数据,无需切换页面
    • 更佳的用户体验:局部刷新、及时验证、操作步骤简化等
    • 节省流量
    • JS控制数据的加载,更加灵活多用

三、基本API(那么AJAX到底如何使用?)

1、XMLHttpRequest 对象
XMLHttpRequest 对象用于在后台与服务器交换数据
所有现代浏览器均支持 XMLHttpRequest 对象
IE5 和 IE6 使用 ActiveXObject)。

//step1: 创建XMLHttpRequest对象
if(window.XMLHttpRequest){ // 非IE5 6
var xhr=new XMLHttpRequest();
}else{ // IE5 6
var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
};

//step2: 打开和服务器的连接
open(method, url, asyn)

参数:
method:String,请求的类型 get 或 post
url:String,文件在服务器上的位置
asyn:Boolean,true(异步)或 false(同步)
同步需要等待返回结果才能继续,异步不必等待
var xhr=new XMLHttpRequest();
xhr.open(‘get’, ‘123.txt’, true); // 常用异步
不推荐使用false(同步),仅用于一些小型的请求

//step3: 发送给服务器
send( string)

xhr.send(); 将请求发送(空或null)到服务器(get请求)
xhr.send(string):仅用于 post 请求
与 post 相比,get 更简单也更快速,并且在大部分情况下都能用。
然而,在以下情况中,请使用 post 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(post 没有数据量限制)
发送包含未知字符的用户输入时,post 比 get 更稳定也更可靠
post请求需在send之前设置:xhr.setRequestHeader(“Content-type”,”application/x-www-form-

urlencoded”);

4、XMLHttpRequest 对象的重要属性:
onreadystatechange 事件
readyState 和 status 属性存有XMLHttpRequest 的状态
readyState 改变时就会触发 onreadystatechange 事件
readyState 从 0 到 4 发生变化:
0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收
3: 请求处理中 4: 请求已完成
status 200:“OK” 404:未找到页面
当readyState为 4 且 status为 200 时,表示响应已就绪
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据
如来自服务器的响应并非 XML,用 responseText 属性
responseText返回字符串形式的响应,可以这样使用:
Div.innerHTML=xhr.responseText;

5、异步加载 txt json xml php,并显示在网页中:

准备一个可以通过网址访问的数据
点击加载按钮的时候,发起一个AJAX请求
请求准备好的网址,得到数据
请求成功后,将得到的数据设置为div的innerHTML

[JS]笔记16_AJAX1基本请求过程

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Struts2架构图 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servle
Asp.Net请求响应过程 在之前,我们写了自己的Asp.Net框架,对整个流程有了一个大概的认识。这次我们
ASP.NET是一个非常强大的构建Web应用的平台,它提供了极大的灵活性和能力以致于可以用它来构建所有
ASP.NET对请求处理的过程 当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断
我们知道了tomcat的启动过程,现在来看一下tomcat的处理请求的过程。 假设来自客户的请求为:http:/
sip 请求消息的过程 1 请求应答的一个过程 1004@192.168.0.107---->1001@192.168.0.112 1 INVITE
这里总结下邮件发送的基本过程, 1.一台邮件服务器,可能作为邮件的出发点,也可以作为邮件的目的地
面向组件架构 tomcat代码看似很庞大,但从结构上看却很清晰和简单,它主要由一堆组件组成,如Server
  Struts2是Struts社区和WebWork社区的共同成果,我们甚至 可以说,Struts2是WebWork的升级版,他
Tomcat   Tomcat的组织结构     由Server.xml的结构看Tomcat的体系结构     Tomca的两大
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号