2020/7/18 ajax复习

最新推荐文章于 2021-09-05 13:07:22 发布

太想进步了

最新推荐文章于 2021-09-05 13:07:22 发布

阅读量112

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_44755188/article/details/107436882

版权

AJAX获取同源策略下的端口数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
</head>
<style>
    .success {
        color: green;
    }
    
    .error {
        color: red;
    }
</style>
<script>
    window.onload = function() {
        var username = document.getElementById("username");
        var email = document.getElementById("email");
        var phone = document.getElementById("phone");
        username.addEventListener('blur', function() {
            var usernamevalue = username.value;
            //1.创建对象，兼容性处理
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2,准备发送
            xhr.open('get', './server/checkUsername.php?uname=' + usernamevalue, true) //true代表异步访问
                //3，执行发送请求
            xhr.send(null); //相当于在地址栏输入地址要敲回车一样
            //4，制定回调函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var result = xhr.responseText //返回的是字符串格式用这个
                            // xhr.responseXML //返回是XML格式的用这个
                        var username_result = document.querySelector('#username_result')
                        if (result == 'ok') {
                            username_result.innerText = "用户名可用";
                            username_result.className = 'success'
                        } else {
                            username_result.innerText = "用户名不可用";
                            username_result.className = 'error'
                        }

                    }
                }
            }
        })
        email.onblur = function() {
            var emailvalue = email.value;
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var param = 'e=' + emailvalue;
            xhr.open('post', './server/checkEmail.php', true);
            xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');
            xhr.send(param);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var result = xhr.responseText;
                        var email_result = document.querySelector('#email_result');
                        if (result == 0) {
                            email_result.innerText = '邮箱可用';
                            email_result.className = 'success'
                        } else {
                            email_result.innerText = '邮箱不可用';
                            email_result.className = 'error'
                        }
                    }
                }
            }
        }
        phone.onblur = function() {
            var phonevalue = phone.value;
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var param = 'phonenumber=' + phonevalue; //注意phonenumber一点都不能动，这是接口文档定义好的，服务器根据这个来判别用户输入是否合法
            xhr.open('post', './server/checkPhone.php', true);
            xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');
            xhr.send(param);

            xhr.onreadystatechange = function() { //只有当readyState改变的时候才会调用
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var result = xhr.responseText; //除了xml都用这种, xhr.responseText返回的是字符串
                        //将result这样的字符串转换成对象
                        result = JSON.parse(result);
                        var phone_result = document.querySelector("#phone_result");
                        if (result.status == 0) {
                            //手机号码可用
                            phone_result.innerText = result.message.tips + '.' + result.message.phonefrom;
                            phone_result.className = 'success';
                        } else if (result.status == 1) {
                            //手机号码不可用
                            phone_result.innerText = result.message;
                            phone_result.className = 'error';
                        }
                    }
                }
            }
        }
    }
</script>

<body>
    <h3>注册见面</h3>
    <form action="">
        用户名：<input type="text" name="" id="username"> <span id="username_result"></span><br> 邮箱：
        <input type="text" name="" id="email"><span id="email_result"></span> <br> 电话： <input type="text" name="" id="phone"><span id="phone_result"></span>
    </form>
</body>

</html>

1、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识）
什么是ajax：
AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术：
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

2、为什么要用ajax：
Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
2、AJAX最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

3、请介绍一下XMLhttprequest对象。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

4、AJAX技术体系的组成部分有哪些。
HTML，css，dom，xml，xmlHttpRequest，javascript

5、AJAX应用和传统Web应用有什么不同。
在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
因为服务器每次都会返回一个新的页面，所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request，一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

6、AJAX请求总共有多少种CALLBACK。
Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

7.Ajax和javascript的区别。
javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术，它是利用了一系列相关的技术其中就包括javascript。
Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。
在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。
在 Ajax应用中信息是如何在浏览器和服务器之间传递的
通过XML数据或者字符串

8、在浏览器端如何得到服务器端响应的XML数据。

XMLHttpRequest对象的responseXMl属性

9、 XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。

  有，IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到

10、介绍一下XMLHttpRequest对象的常用方法和属性。
open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求方式可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法，发送具体请求
abort()方法，停止当前请求
readyState属性请求的状态有5个可取值0=未初始化，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性  服务器的响应，表示为一个串
reponseXML 属性服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok  400对应not found

11、什么是XML
  XML是扩展标记语言，能够用一系列简单的标记描述数据

太想进步了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2020/7/18 ajax复习

AJAX获取同源策略下的端口数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册界面</title></head><style>.
复制链接

扫一扫