web开发Web前端之路Web 前端开发

Ajax？！！

2017-06-17  本文已影响208人  二璇妹妹

其实我想完整的总结一下前端网络的那些东西，但我想不到题目了啊。
就从Ajax开始说吧...

最近玻尿酸鸭很火，先卖个萌吧

Ajax是什么？

曾经，我们每发送一个请求，都要重新加载一下页面。二璇妹妹很小很小时候登录某小游戏网站，输入了账号，但输错了密码，于是乎页面刷新了，还要重新输入用户名，体验贼次啊，好气。

2005年，google地图放大或移动时，做到了不刷新页面就显示新的信息，众人大呼 “哇，这是好棒~~”，嗯，Ajax就风靡起来了。

Ajax Asynchronous Javascript And XML（异步JavaScript和XML），是一种不刷新整个网页就与服务器通讯的办法，数据在客户端与服务器之间独立传输，服务器返回的不再是整个界面。

Ajax的x指的是 xml，曾经Ajax以异步形式操作的是 xml,现在Ajax操作的是Json。

Form表单

上面那个让二璇妹妹很气的事就可能是用form表单提交的信息。那么我们来了解一下吧！

传统的form表单主要有三个重要的属性

Ajax的优点

1.页面无刷新与服务器通信

2.以异步形式与服务器通信，不需要打断用户操作。

3.减轻服务器的负担。

Ajax的缺点

1.破坏浏览器的后退机制。
动态更新页面的情况下，用户无法回到前一个页面状态

2.安全问题
会暴露比以前更多的数据和服务器逻，遇到跨站点脚本攻击、sqi注入攻击问题。

3.对搜索引擎支持较弱（seo）。

4.在移动端兼容性比较差

5.违背了url和资源定位的初衷。
一个url如果采用了ajax技术，也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

还是先说几个重要的参数

对象上三个很重要的方法：

    0代表未初始化，此时已经创建了一个XMLHttpRequest对象
    1代表读取中，此时代码已经调用XMLHttpRequest的open方法并且XMLHttpRequest已经将请求发送到服务期。
    2代表已读取，此时已经通过open方法把一个请求发送到服务端，但是还没有收到。
    3代表交互中，此时已经收到http响应头部信息，但是消息主体部分还没有完全接受
    4代表完成，此时响应已经被完全接受。

让我们来封装一个Ajax吧

   function Ajax(method,url,flag,data,callBack){
    /* 创建对象*/
            var xhr = null;
            if(window.XMLHttpRequest){//用对象访问，即使没有该属性也是返回undefined不会报错。
                xhr = new window.XMLHttpRequest();//与后台服务器交换数据
            }else{
                xhr = new window.ActiveXObject('Microsoft.XMLHTTP');//兼容ie浏览器
            }   
    /*创建与服务器的连接*/
            if(method === 'GET'){
                xhr.open('GET',url + '?' + data, flag);//建立与服务器的连接，flag表示是否异步
                xhr.send();//向服务器发送请求
            }else if(method === 'POST'){
                xhr.open('POST',url,flag);
                xhr.setRequestHeader('Content-type','application/x-www.form-urlencoded');//设置发送数据格式
                xhr.send(data);
            }
    /*实时监听对象状态*/
            xhr.onreadystatechange = function(){//状态改变事件触发器
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        callBack(xhr.responseText);
                    }else{
                        alert('error'); 
                    }
                }
            }               
     }

好吧，我有点懒得解释每个函数，就简单的注释一下。。。
readyState 和 status放在http里说吧，✌️

同源策略

同源策略(Same-Origin Policy)只有在域名、协议名、端口号都相同的情况下，才称为同源。

不同源的客户端脚本在没有明确授权的情况下，是不能够读写对方的资源的。

~~~哦，我们得了解一下什么是域名、协议名、端口号。

url(资源定位器)的构成

（原文：http://blog.csdn.net/ergouge/article/details/8185219 ）

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

从上面的URL可以看出，一个完整的URL包括以下几部分：
1.协议部分
该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
2.域名部分
该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用
3.端口部分
跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
4.虚拟目录部分
从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
5.文件名部分
从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
6.锚部分
从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
7.参数部分
从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

上一篇下一篇

猜你喜欢

热点阅读