学习ajax 总结

Posted 2020-08-19 罗Q

一、服务器客户端基础知识

通信是指不同计算机程序的通信，单单通过ip地址就能知道你找的是哪一台计算机，但是不知道是计算机上的哪个应用程序，要想知道是哪个程序就必须通过端口。这时候就可以问端口到底是什么了，简单点说端口就是计算机对外连接的出口，不同的应用程序的出口不同，所以我们可以用端口来判断是哪个应用程序，通常所说的80端口就是最www上网服务端口

在日常生活中我们记住的都是网站的域名，因为域名有意义方便记住，而ip地址不好记住比如www.baidu.com。那我们通过域名来访问网站时其实是分为几步的

1、在本地的hosts文件中先查询有没有本地的服务器返回文件

2、如果没有就进行域名解析就是DNS，因为服务器厂商会将IP地址对应的域名都保存到抓吗的电脑上，这台电脑保存着域名和IP地址的映射关系

3、通过解析得到的IP地址，浏览器将发送http请求给服务器

4、服务器再返回数据给浏览器解析显示页面

二、ajax能够做什么

我认为ajax其实最重要的核心就是更好的交互。异步的javascript and XML。这个是ajax的解释，其实所谓的异步比起同步来说ajax的优点就表现在：不用每一次页面的部分需要服务端数据时都去服务器端获取数据，而是部分去获取数据，这样就不会出现白屏和当前页面不可用的现象，也能够减少请求服务器而耗费资源占用带宽。那么在我们平时的上网过程中有哪些是用到了ajax技术呢？比如

1、百度搜索提示 2、快递单号查询 3、评论加载等

你可以发现它们在更新数据的时候页面并没有完全刷新，只是需要数据的地方刷新了。

三、ajax原理

可以说是浏览器为需要更新数据的元素创建了一个请求对象，这个请求对象去替浏览器完成向服务器请求数据的工作。这样浏览器就可以接着干别的事情了。具体的步骤如下

1、创建请求对象，但是需要注意的是考虑到浏览器的兼容性，为了代码复用我将兼容的代码放进一个createRequest的函数中

 

function createRequest(){
    try {
         request = new XMLHttpRequest();
    } catch(tryMS) {
        try{
            request = new ActiveXObject("Msxm12.XMLHTTP");
        }catch(otherMS){
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(failed){
                request = null;
            }
        }
    }
    return request;
    
}

2、创建了请求对象之后，可以说现在的请求对象只是一个啥都不会的孩子，因为它现在不知道自己是以什么方式与服务器通信，也不知道去服务器要请求什么数据，所以我们需要为它设置这些属性，就像教导 小孩子一样。

3、设置好请求对象之后，就可以与服务器建立连接了，建立连接是用open方法

request.open(‘GET/POST‘,‘url‘,‘true/false‘);

4、建立好连接之后，就可以发送了用到的是

request.send(null);

5、接下来就要用onreadystate来调用回调函数了

request.onreadystate = function(){}

　我们需要知道的是在发送请求到服务器端后服务器并不是在数据完全解析好之后才与浏览器通信的，而会在不同阶段返回readystate的对应的状态码，当readystate=2时表示服务器正在处理请求。readystate=3时表示数据下载到请求对象，但是响应数据还没有准备好，只有当readystate=4时才表示服务器处理完成请求数据可以使用，所以我们需要限制回调函数执行的时间为当readystate = 4且status=200时执行

if(request.readystate == 4){
  if(request.status == 200){
      //将返回的数据进行处理，常常会用到json.parse将字符串转为json数据
    }      
}

四、跨域解决方案

由于安全方面的原因ajax不能实现跨域，所以就有了jsonp的方式，但是jsonp其实并不复杂。原理就是通过script标签的src属性来找到不同服务器下的资源文件，然后得到的数据进行解析，其实只要有src属性的标签都有跨域能力。解析的时候由于拼接字符串很麻烦，可以采用一些模板技术如artTemplate模板引擎。

五、GET与POST的区别

从使用的方面

1、绝大多数的请求都是get请求，get方式的ajax会有浏览器缓存。

2、当传递加密数据和数据量很大的时候用post

从监视请求方面

1、post发送的数据在请求体中，用户是看不到的

2、get发送的数据在地址栏中