发表于: 2017-06-23 23:27:07

2 917


今天完成的事情:

1、js3任务页面开始写。

2、学习jquery和ajax.
明天计划的事情:

1、完成js3的代码。

2、继续学习jquery.
遇到的问题:

本来是想用jquery的$.cookie();来进行页面间的传值的,可是再调用$.cookie()方法的时候,浏览器报错说是

$.cookie is not a function;

网上搜了下基本都是jquery1.6版本左右下再引入jquery.cookie.js,可是我用的是3.xx版本的jqery,这个问题不知道怎吗解决,然后就用url传参.


收获:

关于ajax 和http协议

lhttp是一种无状态的协议. 无状态指的是不建立持久的连接。
http协议是无状态的,同一个客户端的这次请求和上次请求是没有对应关系,对http服务器来说,它并不知道这两个请求来自同一个客户端。 为了解决这个问题, Web程序引入了Cookie机制来维护状态.
http请求:
1、建立tcp连接
2、web浏览器向web服务器发送请求命令.
3、web浏览器发送请求的头信息
4、web服务器做出应答
5、web服务器发送应答头信息
6、web服务器向浏览器发送数据
7、关闭TCP连接
一个http请求一般右四部分组成:
1、http请求的方法或者动作,比如是get请求 还是post请求
2、正在请求的URL,总得知道请求的地址是什么
3、请求头,包含客户端环境信息,身份验证信息。
4、请求体即请求正文,包含客户提交的查询字符串信息、表单信息等。
GET一般用于获取/查询资源信息,用url传参;而POST一般用于修改更新资源信息.
1. GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的数据放在HTTP包的Body中.
2. GET提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST方法提交的数据没有限制.
3. GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值。
4. GET方式提交数据,会带来安全问题,比如一个登录页面,通过GET方式提交数据时,用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问这台机器,就可以从历史记录获得该用户的账号和密码.
ps:get请求是幂等的,即执行一次与执行一万次的效果是等价的。
http响应一般也由三部分组成:
1、一个数字或者文字组成的状态码,来显示请求成功还是失败
2、响应头,一般包括:服务器类型,日期时间,内容类型和长度
3、相应体,即相应正文。
状态码
Response 消息中的第一行叫做状态行,由HTTP协议版本号, 状态码, 状态消息 三部分组成。
状态码用来告诉HTTP客户端,HTTP服务器是否产生了预期的Response.
HTTP/1.1中定义了5类状态码, 状态码由三位数字组成,第一个数字定义了响应的类别
1XX  提示信息 - 表示请求已被成功接收,继续处理
2XX  成功 - 表示请求已被成功接收,理解,接受 例如200 OK,表示请求被成功地完成,所请求的资源发送回客户端
3XX  重定向 - 要完成请求没有成功,客户必须采用进一步的动作
4XX  客户端错误 -  请求有语法错误或请求无法实现,例如 404 NOT Found,意味着请求引用的文档不存在
5XX  服务器端错误 -   服务器未能实现合法的请求
302 Found
重定向,新的URL会在response 中的Location中返回,浏览器将会自动使用新的URL发出新的Request
例如在IE中输入, http://www.google.com. HTTP服务器会返回302, IE取到Response中Location header的新URL, 又重新发送了一个Request.
304 Not Modified
代表上次的文档已经被缓存了, 还可以继续使用,
400 Bad Request  客户端请求与语法错误,不能被服务器所理解
403 Forbidden 服务器收到请求,但是拒绝提供服务
500 Internal Server Error 服务器发生了不可预期的错误
503 Server Unavailable 服务器当前不能处理客户端的请求,一段时间后可能恢复正常
XMLhttpRequest发送请求
1、open(method、url、async)
method——发送请求方法 GET或者POST
url——请求地址,可以是相对地址,也可以是绝对地址
async——表示请求是同步还是异步  true异步,false同步
2、send(string)
把请求发送到服务器上
在使用get请求
XMLHttpRequest取得响应:
responseText——获得字符串形式的相应数据。
responseXML——获取XML形式的相映数据。
status和statusText——以数字和文本的形式返回HTTP状态码。
getAllResponseHeader()——获取所有的响应报头的字符串
getResponseHeader()——查询响应中某个字段的值
XHR的redayState属性可以提供在异步请求过程中,此时的活动阶段。
0——未初始化,open还未调用。                                         (准备司机、车、货物)
1——服务器已建立连接,open方法已经调用,但send方法未调用 (需要送十车货物,当前正在送第几车)
2——发送,已调用send方法,但尚未接受到响应。此时请求已发送完毕。(十车货送完毕)
3——接受,接受到服务器的响应。                                        (准备把这十车加工的货拉回来,当前第几车)
4——完成,接收到全部响应数据,而且可以在客户端使用。       (十车货全部拉回完毕)
Ajax:readyState(状态值)和status(状态码)的区别
readyState,是指运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤,使用“ajax.readyState”获得
status,是指无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,使用“ajax.status”获得
总体理解:可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。
当redayState属性值发生变化时,都会触发一次redaystatechange事件,所有我们通过onredaystatechange事件,来进行一系列操作
var   xhr =new XMLHttpRequest();
xhr.open('GET','example.txt','true');
xhr.send();
xhr.onredaystatechange=function(){
if(xhr.redayState==4 && xhr.status==200){
//进行一些操作,例如 console.log(shr.responText);
}

}


关于页面间传值:

对于页面间传值,今天看了好几个方法,也就选择了最常用的url传值。


在A页面中把数组用join方法转化为字符串, 

var url = 'js3.html?' + arr2.join(',');
window.location.href = url;

在B页面中把数组的值提取出来。 

var str =decodeURI(location.search);
if(str.indexOf('?') !== -1) {
var arr = str.substr(1).split(',');
}

location.search发挥url中?以后的所有字符串(包括?本身)。





成果展示:把js2任务代码贴上,请师兄帮忙看看。


返回列表 返回列表
评论

    分享到