中软Day13——AJAX概述

中软Day13

前端相关知识点

  • html(html5) 主要用来进行页面排版布局
  • css(css3) 主要用来实现页面梅花
  • js(Jquery) 主要用来实现前端功能特效 js的类库

采用上述技术开发的网页必须放在服务器上才对外提供服务,才能互联网上的网友看到。

服务器请求 F12

XHR XML HTTP REQUEST (请求) ajax

DOC 页面骨架

WS WEB Socket

Manifest html5 中的本地存储

ico icon 图标

swf flash

AJAX

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

什么是AJAX

  • Ajax = 异步 JavaScript 和XML。
  • Ajax是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

注意:Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

初始AJAX

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。局部刷新

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

AJAX概述

它是使用XMLHttpRequest对象来与服务器通信。它可以发送和接收各种格式的信息,包括JSON、XML、HTML和文本文件。Ajax最吸引人的特性是它的“异步”特性,这意味着它可以与服务器通信、交换数据和更新页面,而无需刷新页面。

  • ajax的特性
    • 在不重新加载页面的情况下向服务器发出请求
    • 从服务器接收和处理数据
  • 基本概念
    • 什么是服务器?
      • 服务器也是电脑,只不过是一台24小时不断电,不关机的电脑。
      • 根据提供的服务功能不同:文件服务器,邮件服务器,Web服务器等
      • 总而言之,服务器是一台“提供了某种服务功能”的超级电脑
    • 如何让电脑提供某种服务?
      • 想让电脑提供聊天服务,可以安装相应的聊天软件,如QQ/微信
      • 想让电脑提供听歌服务,可以安装相应的音乐软件,如网易云/酷狗
    • 如何让电脑提供管理网站的服务?
      • 安装Web服务相关软件,如:Apache,IIS,Tomcat等
      • 安装了Web服务软件的电脑,称之为“Web服务器”
      • Web服务器软件:Apache,IIS,Tomcat.Nginx,NodeJS等

AJAX运行原理

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。

AJAX应用场景

主要用于在不刷新页面的情况下,与服务器进行数据交换并更新页面。

1.显示新的内容不需要载入整个界面

2.登录不用跳转到新的页面

3.提交表单立即显示结果

4.搜索框提示文字下拉列表

服务器搭建

  • Web服务器搭建

    • 什么是WAMPServer软件?

      W:Window操作系统

      A:Apache 世界第一的服务器软件,特点是简单,速度快,性能稳定

      M:MySQL开源免费的数据库软件,特点是体积小,速度快,使用成本低

      P:PHP超文本预处理器,直接将代码嵌入HTML文档中执行,特点是简单易学,容易上手

    • 如何搭建Apache服务器?

      • 双击提供的安装包
      • 点击Next
      • 选择安装路径(注意路径中不要出现中文)
      • 勾选两个方框,点击next继续安装
      • 点击install开始安装
      • 安装完毕以后点击finish即可启动wamp
    • 验证搭建是否成功

      打开浏览器输入127.0.0.1查看显示的内容

    中软Day13——AJAX概述_第1张图片
    出现该页面,则说明该使用电脑变为服务器,WAMPServer安装成功。

    中软Day13——AJAX概述_第2张图片
    通过WAMPServer,可以用ajax和服务器交换数据。

    • 如何修改默认端口号

      • httpd.conf文件中搜索Listen,改为你想要的数字即可
      • 重启WAMP

操作步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

  1. 创建XMLHttpRequest核心对象,也就是创建一个异步调用对象.

    var xmlHttp;
    if(window.XMLHttpRequest){  //针对除IE6以外的浏览器
        xmlHttp=new XMLHttpRequest(); //实例化一个XMLHttpRequest
    }else{
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   //针对IE5,IE6
    }
    
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息, 用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据.

    XMLHttpRequest.open(method,URL,flag,name,password)
    
         代码中的参数解释如下所示:
    
           method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。
    
           URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
    
           flag:该参数为可选参数,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式,默认为true。
    
           name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
    
           password:该参数为可选参数,用于输入密码。如果服务器需要验证,则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。
    
    var xmlHttp = new XMLHttpRequest();
       xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式
       xmlHttp.send(); //使用open()方法将请求发送出去
       xmlHttp.onreadystatechange()=>{
            if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
    
            }
    }
    
  3. 设置响应HTTP请求状态变化的函数.

    处理响应的JS函数名称

    httpRequest.onreadystatechange = nameOfTheFunction;
    

    首先,函数需要检查请求的状态。如果状态值为XMLHttpRequest.DONE(对应于4),这意味着收到了完整的服务器响应,您可以继续处理它。

    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        // Everything is good, the response was received.
    } else {
        // Not ready yet.
    }
    

    readyState值记录在XMLHTTPRequest.readyState详情如下:

    • 0(未初始化)或(请求未初始化)
    • 1(装载)或(建立服务器连接)
    • 2(装载)或(收到的请求)
    • 3(互动)或(处理请求)
    • 4(完整)或(请求完成,响应就绪)
  4. 处理响应码

    如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

    ​ 但是,异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值,只有该属性值为200,才表示异步调用成功,因此,要获取服务器返回数据的语句,还必须要先判断XMLHttpRequest对象的status属性值是否等于200。

    if (httpRequest.status === 200) {
        // Perfect!
    } else {
        // There was a problem with the request.
        // For example, the response may have a 404 (Not Found)
        // or 500 (Internal Server Error) response code.
    }
    
  5. 发送HTTP请求.

    在经过以上几个步骤的设置之后,就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法,其语法代码如下所示:

        XMLHttpRequest.send(data)
    

    ​ 其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似,以下代码为一个send()方法中的data参数的示例:

      name=myName&value=myValue
    

    ​ 只有在使用send()方法之后,XMLHttpRequest对象的readyState属性值才会开始改变,也才会激发readystatechange事件,并调用函数。

  6. 获取异步调用返回的数据.

  7. 使用JavaScript或DOM实现局部刷新.

    • 表单对象的数据更新

      表单对象的数据更新,通常只要更改表单对象的value属性值。

       FormObject.value = "新数值"
      

      有关表单对象的数据更新的示例:

         <html><head><title>局部更新title>
      
                                     
                          
                          

你可能感兴趣的:(中软学习笔记,ajax)