Ajax的快速入门

2019-05-13 07:13:26来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.什么是ajax

      ajax是技术名词的缩写:

       Asynchronous:异步;

       JavaScript:JavaScript语言;

       And:和、与;

       XML:数据传输格式

      ajax是客户端通过HTTP向服务器发送请求

2.ajax对象的属性、方法

   属性

readyState:  Ajax状态码

 

         3.xhr.getAllResponseHeaders() 获取全部响应头信息

         4.xhr.getResponseHeader('key') 获取指定头信息

         5.send([content]) :发送Ajax请求content : 如果是get请求时,此参数为null;如果是post请求时,此参数就是要传递的数据

        注意: 所有相关的事件绑定必须在调用send()方法之前进行.

3.案例

     html页面

     

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        用户名:<input type="text" value="" id="inp">
        <span></span>
    </body>
    <script>
      var inp=document.getElementById('inp');
      inp.onblur=function(){
          var xhr=new XMLHttpRequest();
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                 if(xhr.responseText==1){
                      inp.nextElementSibling.innerHTML='此用户名不可以用';
                      inp.nextElementSibling.style.color='red';
                 }
                 else{ 
                      inp.nextElementSibling.innerHTML='此用户名可以用';
                      inp.nextElementSibling.style.color='green';
                 }

              }
          }
          xhr.open('get','http://127.0.0.1:8000/getone?'+inp.value);
          xhr.send();
      }
</script>
</html>

  js页面

//引入http模块
var http = require('http');
//引入fs模块
var fs = require('fs');
//引入url模块
var url = require('url');
//创建一个server对象
var server = http.createServer();
//设置8000端口
server.listen(8000, function () {
    console.log('启动8000服务器', 'http//127.0.0.1:8000')
});
//设置server事件
server.on('request', function (req, res) {
    //判断路径
    var urls = url.parse(req.url);
    if (urls.pathname == '/getone') {
        // console.log(urls.query);
        if (urls.query == "admin") {
            res.end('1');
        }
        else {
            res.end('0');
        }
    }
    else {
        fs.readFile('.' + urls.pathname, function (err, data) {
if (!err) { res.end(data); } else { res.end(''); } }); } });

  

 


原文链接:https://www.cnblogs.com/shineguang/p/10850651.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue 弹窗时 监听手机返回键关闭弹窗(页面不跳转)

下一篇:表单操作