Ajax

1.同步交互和异步交互

同步交互:就是客户端浏览器给服务端发送一个请求,服务端返回一个页面,返回的页面会把之前的界面覆盖

异步交互:就是客户端浏览器给服务端发送一个请求,服务器返回数据,返回的数据不会把之前的界面覆盖

2,运用的场景:

Ajax主要运用的场景,页面不会刷新,就可以与服务端进行动态的交互;

就你如说:百度的注册页面,检测用户名是否存在,失去焦点发送请求

也可以用来做性能优化,比如一个页面非常庞大,这个页面不可能一次加载完毕

3.交互原理

我们在浏览器怎么给服务器发送请求,点击超链接提交表单,浏览器地址,输入地址,都是给服务器发送请求(就比如说:我们输入关键字,触发一个事件,执行一个方法,调用js的这个api,通过这个api,给服务器发送请求,通过api,接收数据,然后把接收到的数据,通过dom把这个数据写道页面上,就完成了异步交互)

4.在javascript中,ajax是通过XMLHttpRequest对象来实现的,这个对象用于和后台进行数据的交互。在ie7之前,XHR是通过MSXML库中的ActiveX对象实现的,ie7后我们可以直接使用 var xhr = new XMLHttpRequest();创建一个XHR对象,创建好之后,我们就可以通过xhr对象来调用相应的方法了。

5.Ajax的请求方式:post和get

 ajax 所有参数:

url:请求地址

type:请求方式(GET/POST)

data:要发送的数据

async:同步异步(true/false)

beforsend:发送请求前执行的函数(全局)

success:发送成功之后的回调函数(全局)

error:失败之后执行的回调函数(全局)

6.GET和POST的区别
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符,有的浏览器是8000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制

在以下情况中,请使用 POST 请求:
 无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

7.ajax的本质就是xmlHttpRequest对象,控制台输出这个对象,这个对象上有三个属性:

(1)readyState  请求的五个阶段 0 1 2 3 4

(2)responseText  返回的文件内容

(3)Status  状态吗  返回的状态信息

       200 表示成功了

  3xxx代表禁用的意思

  404代表文件没有找到

  5xx代表服务器的问题

在对象上__proto__上有三个方法:

(1)open()  给后台发送请求(get/post,同步异步,请求地址)

(2)send()  发送

(3)onreadystatechange() 服务器响应 (如果发送成功则对返回的数据进行处理)

8.Ajax的使用步骤:

代码: function ajax(method,url,sync,fn){

    第一步:创建XmlHttpRequest对象

             //如果浏览器是新版本,则支持window.XMLRquest,老IE则后面的版本

      var xmlhttp=new XMLHttpRequest();

    第二步:发送Ajax请求
              //创建Ajax请求(GET为发送请求的方式,true为Ajax异步发送,false为同步)

      xmlhttp.open(methods,url,sync);

    第三步

             //发送到服务器:

      xmlhttp.send();

    第四步:xmlhttp.status属性服务器状态码,200:成功 404:未找到 500:内部程序错误

      xmlhttp.onreadyStateChange=function(){

        if(xmlhttp.readystate==4){

          if(xmlhttp.status==200){

            fn(xmlhttp.responseText)

          }

         }

        }

      }

9.jquery中的Ajax

get 所有参数:

url:载入页面的地址  

data:向服务器发送的数据(键值对)

success:成功后的回调函数

datatype:返回的内容的数据形式

 post 所有参数:

url:载入页面的地址  

data:向服务器发送的数据(键值对)

success:成功后的回调函数

datatype:返回的内容的数据形式

用的比较多的是:

$.ajax({

          url:'请求后台地址',

          type:'get',//默认

          dataType:'json',//大部分情况下

         success:function(data){

     }

 });

后面的你就自己去写,jq的Ajax简单一点,代码相对来说少点,这主要看你自己怎么去用

Ajax的优缺点:

Ajax的优点:(1)页面无刷新更新数据

                     (2)前端和后端负载平衡

                     (3)基于标准被广泛支持

                     (4)界面与应用分离

                     (5)异步与服务器通讯

Ajax的缺点:(1)AJAX的安全问题

                      (2)对搜索引擎支持较弱

                      (3)破坏程序的异常处理机制

                      (4)AJAX不能很好支持移动设备

    适合用在 表单驱动的交互,深层次的树的导航,普通文本输入提示和自动完成,对数据进行过滤和操纵相关数据,快速的用户与用户间的交流响应

    不适合用在 搜索 ,基本的导航,替换大量的文本,部分简单的表单

posted @ 2020-03-15 10:28  笑等茶凉zl  阅读(135)  评论(0编辑  收藏  举报