发表于: 2018-07-02 21:36:32
1 306
今天完成的事情:
#1 今天学习登陆用到的基础知识,主要是Ajax和HTTP协议
1999年,微软公司发布 IE 浏览器5.0版,第一次引入新功能:允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意,直到2004年 Gmail 发布和2005年 Google Map 发布,才引起广泛重视。2005年2月,AJAX 这个词第一次正式提出,它是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。后来,AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。
具体来说,AJAX 包括以下几个步骤。
1 创建 XMLHttpRequest 实例
2 发出 HTTP 请求
3 接收服务器传回的数据
4 更新网页数据
概括起来,就是一句话,AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON 格式的数据,XML 格式已经过时了,但是 AJAX 这个名字已经成了一个通用名词,字面含义已经消失了。
XMLHttpRequest对象是 AJAX 的主要接口,用于浏览器与服务器之间的通信。尽管名字里面有XML和Http,它实际上可以使用多种协议(比如file或ftp),发送任何格式的数据(包括字符串和二进制)。
XMLHttpRequest本身是一个构造函数,可以使用new命令生成实例。它没有任何参数。
var xhr = new XMLHttpRequest();
一旦新建实例,就可以使用open()方法发出 HTTP 请求。
xhr.open('GET', 'http://www.example.com/page.php', true);
上面代码向指定的服务器网址,发出 GET 请求。 然后,指定回调函数,监听通信状态(readyState属性)的变化。
ajax.onreadystatechange = handleStateChange;
function handleStateChange() { // ... }
上面代码中,一旦XMLHttpRequest实例的状态发生变化,就会调用监听函数handleStateChange 一旦拿到服务器返回的数据,AJAX 不会刷新整个网页,而是只更新网页里面的相关部分,从而不打断用户正在做的事情。 注意,AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错。
明天计划的事情:
#1 完成静态页面
#2 配置nginx 和反向代理
#3 尝试Ajax
遇到的问题:
无
收获:
登陆是很多网站的第一步,包含账号密码验证、提示错误信息,与后台的交互以及可能存在的跨域问题,浏览器的安全策略等。虽然是一个简单的页面,背后存在很多细小的技术点,同时也是和后端协作的过程。
任务5
开始时间:7.2
预计结束时间:7.7
http://task.jnshu.com/zentao/project-task-629.html
评论