T-Ajax基础-day02-简易DOM操作、ajax

最新推荐文章于 2024-07-16 20:32:10 发布

奋斗胖

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量180

点赞数

分类专栏： + Ajax 文章标签： ajax javascript

本文链接：https://blog.csdn.net/Mr_JinChang/article/details/105154498

版权

+ Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一.简易DOM操作
二.Ajax
目前常见错误总结

一.简易DOM操作

为什么使用DOM
使用ajax就不用form提交请求，form提交请求，控件必须有name属性，提交的时候form自动收集数据，并提交。不适用form就需要手写DOM，收集数据。使用DOM，用id属性，对于单选按钮和多选按钮，需要name属性来分组
写DOM的步骤
（先激活事件，调用js方法）
①得到要操作的元素对象（找元素）
②使用对象，调用方法和属性（对象.方法() 或对象.属性）
具体代码操作
1. 获取标签对象
  let obj=document.getElementById("id");
  ES6规定，可以直接使用标签的id值来代表标签对象
  但是要注意id和变量名的冲突问题
  通常解决方法：let _uname=uname.value;或let $uname=uname.value;保留语义的同时，定义变量名
2. 使用对象调用属性
  1. input元素 id.value
  2. 双标签元素 id.innerHTML
关于innerHTML的进阶详解
可以使用innerHTML改变页面
事件
事件：通过用户的某种操作，激发的行为
onclick="" 用户点击元素，激活事件，调用js方法
<body onload="show()">页面加载就激活事件，用户刷新页面就能激活
获取焦点事件 onfocus="show_uname()"
失去焦点事件 onblur="check_upwd()"
练习：03_ex.html。用户名、密码和密码确认的input，登录按钮
要求，
用户名获取焦点，提示长度范围6_{12位，用户名失去焦点，做非空验证，做格式验证6}12位；
密码获取焦点，提示长度范围8_{16位，密码失去焦点，做非空验证，做格式验证8}16位；
密码确认获取焦点，提示，请在输入一次密码，密码确认，验证两次密码是否输入一直。
提高：在3个input都正确的情况下，才能点击登录按钮，弹窗登录成功，有一个input不符合要求，点击登录按钮，弹窗不能登录

二.Ajax

同步Synchronous
在一个任务进行的过程中，不能开启其他任务
同步访问：浏览器在想服务器发送请求是，浏览器只能等待服务器的响应，不能做其他的事
出现的场合：
1. form是同步访问
2. 浏览器地址输入url访问
3. a标签跳转
异步Asynchronous
在一个任务开启时，可以执行其他任务
异步的访问：浏览器在向向服务器发送请求的时候，用户可以在页面上进行其他操作
出现的场合：
1. 用户名重复验证
2. 股票软件
3. 百度搜索，联想建议
什么是ajax
Asynchronous JavaScript and XML
异步的，js，xml（目前更多人用json）
ajax的原理：使用js提供的异步对象(XMLHttpRequest)，异步的向服务器发送请求，并接受响应回来的数据
ajax使用步骤(通常步骤为1,4,2,3)
浏览器，地址栏访问，使用的是get请求，所以只能访问get的请求
1. 创建异步对象（小黄人骑着小毛驴）
  var xhr=new XMLHttpRequest();
2. 创建请求(打开链接)
  xhr.open("methor","url",isAsy);
  method：请求方法
  url：请求的接口
  isAsy：是否使用异步的方式发送请求，true使用异步，false不使用异步
3. 发送请求
  xhr.send(formdata);
  formdata：请求带请求主体，就要填写formdata参数；请求不带请求主体，括号中可以不填，也可以填null
4. 接收响应（打开监听）
  xhr.onreadystatechange=function (){ }
  每一次监听到目标，就调用一次function
  监听目标是谁？：xhr.readyState
  xhr.readyState表示xhr对象的5个状态：0：请求尚未初始化；1：打开链接，请求正在发送；2：接收响应头信息；3：正在响应主体；4：响应主体接收完毕。
  xhr.readyState的值每改变一次，function就执行一次，一共执行4次
```
xhr.onreadystatechange=function(){
  //要readyState的第四次，同时响应还是正确的
  if(xhr.readyState==4 && xhr.status==200){
    //接收响应
   var r=xhr.responseText;
   console.log(r);
  }
}
```
  练习：编写02_ajax.html 点击按钮访问上一个练习的接口。把响应的数据放到div中显示。
5. ajax访问原生http的get，并且传递参数
  xhr.open("get","url?"+参数,true);
  练习：创建接口/http_login
  接口获取前台uname,upwd
  非空验证
  查询数据库，如果查到，返回响应1，如果没查到，返回响应0
  前台04——http_login.html：文本框，密码框，按钮，div
  点击按钮，登录，发送请求给http_login。div中显示登录成功、登录失败

目前常见错误总结

Uncaught SyntaxError:Invalid or unexpected token
出乎意料的标点符号(写成中文符号，或者符号缺失)
Uncaught SyntaxError:Unexpected end of input
缺少结束的符号，就是方法没封口
Access to XMLHttpRequest at 'http://127.0.0.1:8080/ajax/ajaxdemo' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域错误
不报错，没效果，怎么办
每节行代码都打桩测试！

奋斗胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
T-Ajax基础-day02-简易DOM操作、ajax

文章目录一.简易DOM操作二.Ajax目前常见错误总结一.简易DOM操作为什么使用DOM使用ajax就不用form提交请求，form提交请求，控件必须有name属性，提交的时候form自动收集数据，并提交。不适用form就需要手写DOM，收集数据。使用DOM，用id属性，对于单选按钮和多选按钮，需要name属性来分组写DOM的步骤（先激活事件，调用js方法）①得到要操作的元素对象（找...
复制链接

扫一扫