zoukankan      html  css  js  c++  java
  • AJAX学习笔记(一)基础知识

    一、HTTP协议
    1、HTTP: 计算机通过网络进行通讯的规则,用于浏览器向服务器发送请求。
    2、HTTP是一种无状态的协议,无状态是指服务器端不保留任何连接相关的信息,浏览器客户端向服务器发送请求,服务器端返回响应,然后连接就关闭了,这个连接不存在任何记忆。后续的处理如果需要之前连接传递的信息,则需要重新传递。
    3、完整的HTTP请求需要以下7个步骤:
    (1)建立TCP连接,通常HTTP协议都是用TCP协议连接,TCP是可靠的协议。
    (2)Web浏览器向Web服务器发送请求命令。
    (3)Web浏览器发送请求头信息。
    (4)Web服务器应答。
    (5)Web服务器发送应答头信息。
    (6)Web服务器向浏览器发送数据。
    (7)Web服务器关闭TCP连接。
    4、一个HTTP请求包含四个部分:
    (1)HTTP请求的方法:GET或者POST。
    (2)请求的URL,即请求的地址。
    (3)请求头,包含客户端环境信息、身份验证信息等。
    (4)请求体,也就是请求正文,包含客户提交的查询字符串信息、表单信息等。
    5、GET方法与POST方法
    (1)GET:一般用于获取信息,即查。使用URL传递参数,参数一般为用户获取信息的条件。HTTP协议默认使用的方法是GET方法,对于查询请求,GET方法是安全的,但用GET方法发送用户名和密码是不安全的,因为GET请求发送的信息对任何人都是可见的,GET请求所传输的数据都会显示在URL路径中。GET方法对所发送信息的数量有限制,一般在2000个字符。
    (2)POST:一般用于修改服务器上的资源,即增、删、改等。一般是通过表单向服务器传递数据,所传递的数据并不可见,所传递的都被封装在请求体中。
    6、一个HTTP相应包含三个部分:
    (1)响应码:一个数字或文字组成的状态码,用来显示请求成功还是失败。
    (2)响应头:包含服务器的信息,如服务器类型、日期时间、内容类型和长度等。
    (3)响应体:响应正文,即返回的响应信息内容。
    7、HTTP响应状态码介绍:
    1XX:信息类,表示收到WEB浏览器的请求,正在进一步的处理中。
    2XX:成功,表示用户的请求被正确接收、理解和处理:如200 OK。
    3XX:重定向,表示请求没有成功,客户必须采取进一步的动作。
    4XX:常见,客户端提交的请求有错误,比如:404 NOT FOUND,意味请求的路径不存在等。
    5XX:常见,服务器错误,表示服务器不能完成对请求的处理,比如500错误。
    二、使用XMLHttpRequest对象发送请求:
    AJAX最重要的部分就是使用XMLHttpRequest对象发送请求,XMLHttpRequest对象针对IE7以上、Firefox、Chrome、Safari以及Opera,对于IE5和IE6则使用ActiveXObject对象,因此创建对象的方法如下:
    var xmlHttpRequest;
    if(window.XMLHttpRequest){//存在XMLHttpRequest,表示是IE7及其他主流浏览器。
         xmlHttpRequest = new XMLHttpRequest();
    }else{
         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    该对象通过两个方法发送请求。
    1、open(method,url,async):
    method:POST或者GET。
    url:请求的路径。
    async:是否异步,true表示异步,false表示同步,默认为true,AJAX一般用异步。
    备注:同步和异步:同步表示同一时间只能执行一个请求,后面的请求必须等到前面的请求执行完毕才能继续执行;异步表示多个请求可以同时执行,不必等待前一个请求执行完毕,异步的请求效率远远高于同步请求。
    2、send(string):发送请求,send(string)方法的String类型的参数用于传递请求的参数,由于GET方法的参数通常接在url的后面,因此在使用GET方法发送请求时,send(string)方法的参数可以不填写或者填写null;而POST方法不能通过url传递参数,因此当使用POST方法发送请求时,通常send(string) 方法String类型的参数都要填写,当然不填写也没有错,但应用情况很少。
    3、XMLHttpRequest.setRequestHeader()方法
         setRequestHeader()方法用于在发送HTTP请求时对请求头包含信息的设置和更改。通常有两个参数,第一个参数表示请求头中的字段名称,第二个参数表示该字段名称对应的内容。比如原始请求头
            GET /bb.asp?www=1234 HTTP/1.1 
      Accept: */* 
      Accept-Language: zh-cn 
      UA-CPU: x86 
      Accept-Encoding: gzip, deflate 
      User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 
      Host: www.e4j.cn:89 
      Connection: Keep-Alive 
      Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII
    调用setRequestHeader()方法对请求头信息进行更改:
             xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
             xmlHttpRequest .setRequestHeader("Content-length", paramsSend.length);
    此时的请求头内容为:
            GET /bb.asp?www=1234 HTTP/1.1 
      Accept: */* 
      Accept-Language: zh-cn 
      UA-CPU: x86 
      Accept-Encoding: gzip, deflate 
      User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 
      CONTENT-TYPE:application/x-www-form-urlencoded 
      Host: www.e4j.cn:89 
      Content-length: 8 
      Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII
         xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");设置了一个请求头,表示设置提交给服务器文本内容的编码方式是URL编码,还有其他编码方式,比如文件上传的 CONTENT-TYPE:multipart/form-data
        xmlHttpRequest .setRequestHeader("Content-length", paramsSend.length);表示提交的数据的字节大小,对于采用GET方法提交的请求,由于不需要提交数据,Content-length 是无效的。
         XMLHttpRequest.setRequestHeader()方法必须写在open()和send(string)方法的中间,否则会抛出异常。
    4、XMLHttpRequest取得响应
         responseText:获得字符串形式的响应数据。
         responseXML:获得XML形式的响应数据。通常应用中都是用Json返回响应信息。
         status和statusText:以数字和文本形式返回HTTP状态码
         getAllResponseHeader(): 获取所有的响应报头
         getResponseHeader(String string): 查询响应中的某个字段的值。
    5、监听响应状态
         readyState属性:
         0:请求未初始化,open还没有调用。
         1:服务器连接已建立,open已经调用了。
         2:请求已接收,已经接收到头信息了。
         3:请求处理中,已经接收到响应主体了。
         4:请求已完成,响应完成了。
         监听响应状态的方法:onreadystatechange事件,在readyState属性变化的时候会触发,
         var request = new  XMLHttpRequest();
         request.open("GET","get.php",true);
         request.send();
         request.onreadystatechange = function(){
              if(request.readystate === 4 && request.statue === 200){//readystate表示响应状态,status表示请求状态
                            do something; 
              }
         }
         备注:在js中两个等号和三个等号的区别,如果采用两个等号比较大小,当“==”两边的变量类型不相同时,会自动转换成相同的类型再进行比较;当采用三个等号时,“===”两边变量的类型不相同,则比较结果为不等。比如:
          var a = 0, b = ‘0’;  alert((a == b) + ‘–‘ + (a === b))此时看到的结果为“true–false”。
        具体比较规则见链接:http://zzstudy.offcn.com/archives/10937  
       参考资料网址:慕课网Ajax全接触视频:
       XMLHttpRequest.setRequestHeader()
  • 相关阅读:
    Android——Activity去除标题栏和状态栏
    Android——程序员的情怀——优化BaseAdapter
    Android——Android Sutido:[2]导入eclipse项目篇
    【Android开源项目分析】自定义圆形头像CircleImageView的使用和源码分析
    学佛略要
    Keystone, Start, Failed to Load Bson
    又梦见了你
    伦敦之旅
    无题
    Multiverse in Doctor Strange // Multiverse在《神秘博士》
  • 原文地址:https://www.cnblogs.com/bjh1117/p/6484002.html
Copyright © 2011-2022 走看看