Ajax 基础

一、Ajax
  • AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
     
    异步的JavaScript:
    使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
    PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
    XML
    XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一

  • 利用AJAX可以做:
    1、注册时,输入用户名自动检测用户是否已经存在。
    2、登陆时,提示用户名密码错误
    3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

 

二、<ifram> </iframe> 标签

  • 由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。
<!DOCTYPE html>
<html>
 
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
 
        <div>
            <p>请输入要加载的地址:<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" />
                <input type="button" value="刷新" onclick="LoadPage();">
            </p>
        </div>
 
 
        <div>
            <h3>加载页面位置:</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>
 
 
        <script type="text/javascript">
 
            window.onload= function(){
                var myDate = new Date();
                document.getElementById('currentTime').innerText = myDate.getTime();
 
            };
 
            function LoadPage(){
                var targetUrl =  document.getElementById('url').value;
                document.getElementById("iframePosition").src = targetUrl;
            }
 
        </script>
 
    </body>
</html>

 

三、原生Ajax

1. XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法:

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

2. XmlHttpRequest对象的主要属性:

1. Number readyState
   状态值(整数)
 
   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;
 
2. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)
 
3. String responseText
   服务器返回的数据(字符串类型)
 
4. XmlDocument responseXML
   服务器返回的数据(Xml对象)
 
5. Number states
   状态码(整数),如:200、404...
 
6. String statesText
   状态文本(字符串),如:OK、NotFound...

 

四、创建原生Ajax请求

<script>
    // 创建XML 对象
    var xhr = new XMLHttpRequest();
    
    // 打开一个链接,发送方式 POST  提交地址url   移步提交async为真
    xhr.open(type='POST', url='www.baidu.com', async=true);

    // 第一个参数为 key 第二个参数为 value    下面两个参数意思为让后台当成文本类型处理
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
</script>

猜你喜欢

转载自www.cnblogs.com/shiqi17/p/9689059.html