一、概述

对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。

1、传统的Web应用:一个简单操作需要重新加载全局数据。

2、Ajax

AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
 
异步的JavaScript:
    使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
XML
    XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一
PS:
XML 一般用于编写配置文件,语法方便描述配置文件内的信息,举例如下:
<start>  
    <username>xiaowang</username>
    <age>18</age>
       .....
</start>
 
利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。(博客园)

3、Ajax分类及定义

Ajax操作共分为三类:原生Ajax,jQuery Ajax,和伪Ajax 三种方式。这三种方法都能偷偷向后台发送请求。目前熟知的仅是 jquery ajax。

1. 原生ajax:是ajax本质,通过页面的XMLHttpRequest对象来调用。send 发送数据,往请求体里放数据。
2. jquery与ajax的关系 内部基于"原生ajax" 是对原生ajax的封装,使用起来简单。
  jquery 相当于是个模块,他调用了很多内置方法,把发送ajax请求的方法,封装在了其内部,我们使用的时候直接调用ajax这个函数即可。
3. 伪ajax,不用XMLHttpRequest对象,使用浏览器里的标签和标签的特性伪造出来的。

二、原生Ajax

  Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早期的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。

XmlHttpRequest对象介绍

a. void open(String method,String url,Boolen async)
   用于创建请求
     
   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)
  
b. void send(String body)
    用于发送请求
  
    参数:
        body: 要发送的数据(字符串类型)
  
c. void setRequestHeader(String header,String value)
    用于设置请求头
  
    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)
  
d. String getAllResponseHeaders()
    获取所有响应头
  
    返回值:
        响应头数据(字符串类型)
  
e. String getResponseHeader(String header)
    获取响应头中指定header的值
  
    参数:
        header: 响应头的key(字符串类型)
  
    返回值:
        响应头中指定的header对应的值
  
f. void abort()
  
    终止请求

2、XmlHttpRequest对象的主要属性:

a. Number readyState
   状态值(整数)
  
   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;
  
b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)
  
c. String responseText
   服务器返回的数据(字符串类型)
  
d. XmlDocument responseXML
   服务器返回的数据(Xml对象)
  
e. Number states
   状态码(整数),如:200、404...
  
f. String statesText
   状态文本(字符串),如:OK、NotFound...
 function func1() {
        var xmlhttp = createHMLHttpRequeset();
        xmlhttp.open("POST", "/ajax_recevie/", true) //请求的监控的地址
        xmlhttp.send("name-NBA")
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 /*&& xmlhttp.status==200*/) {
                var data = xmlhttp.responseText
                alert(data)
            };
        }
    }
     function  createHMLHttpRequeset() {
       //创建一个XMLHttpRequest,try防止浏览器不一致造成创建不成功
      /* var xmlHttp;
       try {
           xmlHttp=new  XMLHttpRequest();
       }catch (e){
           try{
               xmlHttp =new  ActiveXObject("Msxml2.XMLHTTP");
           }catch (e){
               try {
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
               }catch (e){}
           }
       }
       return xmlHttp;*/
      var xmlHttp;
      xmlHttp=new  XMLHttpRequest();
      return xmlHttp
     }
创建一个XmlHttpRequest请求

相关文章:

  • 2021-12-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-12-25
  • 2022-12-23
  • 2021-10-26
  • 2021-07-07
  • 2021-07-24
  • 2021-12-07
相关资源
相似解决方案