• AJAX-DOM事件


    1.DOM事件
    1.select的onchange事件
    当选项框中的内容发生改变时需要出发的事件。
    2.Ajax
    1.名词解释
    1.同步
    在一个任务进行中,不能开启其它的任务。
    同步访问:浏览器在向服务器发送请求时,浏览器只能等待服务器的响应,不能做其它的事情。
    出现场合:
    1.地址栏输入网址访问页面
    2.a标记的默认跳转
    3.submit按钮的表单提交
    2.异步
    在一个任务进行中时,可以开启其它的任务
    浏览器在向服务器发送请求的时候,不耽误用户在网页中做其他的操作。
    出现场合:
    1.股票的走势图
    2.聊天室
    3.用户名验证
    4.建议搜索
    2.什么是Ajax
    1.Asynchronous Javascript And Xml
    异步的 js 和 Xml
    2.本质:使用js提供的异步对象(XMLHttpRequest),异步的向服务器发送请求,并接收响应回来的数据(数据格式是Xml)。
    3.异步请求的步骤
    1.创建Ajax异步对象(xhr)
    2.绑定事件
    3.打开连接
    4.发送请求
    4.创建异步对象(xhr)
    标准创建:var xhr=new XMLHttpRequest();
    IE8以下浏览器:var xhr=new ActiveXObject("Microsoft.XMLHttp");
    如何判断?
    通过window.XMLHttpRequest来判断浏览器是否支持标准创建。如果浏览器不支持标准创建,那么window.XMLHttpRequest的值为null。
    练习:
    将创建xhr对象的方法封装到独立的js文件中。
    要求:判断浏览器是否支持标准创建,如果支持返回标准创建的对象,否则返回IE8以下创建的对象。
    5.异步对象xhr的常用属性和方法
    1.readyState属性
    作用:用于表示xhr对象的请求状态
    值:
    0:请求尚未初始化
    1:已经打开到服务器的链接,正在发送请求中
    2:接收响应头
    3:接收响应主体
    4:接收响应数据成功
    注意:当readyState的值为4的时候,才表示所有的响应都已经接收完毕。
    2.status属性
    作用:表示的是服务器的响应状态码
    值:200 响应成功
    当status的值是200的时候,表示服务器已经正确的处理请求并给出了响应。
    3.onreadystatechange-事件
    作用:当xhr的readyState属性值发生改变时,要自动激发的操作。
    语法:
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
    var result=xhr.responseText;
    console.log(result);
    }
    }
    6.打开连接open()
    作用:打开连接(创建请求)
    语法:xhr.open(method,url,isAsyn);
    method:请求的方法(get/post)
    url:请求地址(ex:http://127.0.0.1/login.php)
    isAsyn:指定采用同步还是异步发送请求(true:异步,false:同步)
    7.send()
    作用:发送请求
    语法:xhr.send(请求主体);
    如果请求方法是get,没有请求主体send(null)
    如果请求方法是post,则send(主体数据)

    练习:
    1.创建一个response.php,响应输出一句话“我的AJAX练习”。
    2.创建ajax-exercise.html,在网页中添加一个按钮和div(id="show")。
    3.单击按钮时,异步的向response.php发送请求,并将响应回来的数据以h1的方式显示在div中。
    3.使用get方法传参给服务端
    ex:
    user_login.php?uname=dangdang&upwd=123456
    在php中:
    $_REQUEST["uname"];
    $_REQUEST["upwd"];

    练习1:
    1.创建一个ajax-get.html
    添加一个文本框(id="uname")
    添加一个按钮,单击按钮时,将文本框中的数据作为参数,异步的提交给ajax-get.php文件,并且将响应的数据显示在一个div里。
    2.创建ajax-get.php
    接收前端传递过来的数据
    将数据拼成“欢迎XXX”,再响应给浏览器。
    练习2:
    1.在练习1的基础上,将网页另存一份,然后在网页中添加一个密码框,将用户名和密码同时提交给服务端。
    2.将练习1中的php文件另存一份,然后在php文件中同时接受前端传递过来的用户和密码,然后判断,如果用户名=dangdang,密码=123456,响应“登录成功”,否则“登录失败”。
    4.使用post方法提交数据
    1.提交的数据需要放在send()主体位置处
    ex:
    var msg="uname="+userName+"&upwd="+upwd;
    xhr.send(msg);
    2.设置请求的消息头
    必须在发送请求之前设置消息头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");




  • 相关阅读:
    HTTP 协议详解
    HTTP抓包工具之Fiddler
    C#网络编程(订立协议和发送文件)
    C#编程总结(十)字符转码
    通信协议:HTTP、TCP、UDP
    C# 对象、文件与二进制串(byte数组)之间的转换
    从输入URL 到页面加载完成的过程
    java动手动脑
    大道至简第二章读后感
    《大道至简》第一章 读后感
  • 原文地址:https://www.cnblogs.com/QiliPING9/p/9027838.html
Copyright © 2020-2023  润新知