AJAX二
二.简单的dom操作
2.使用js的dom获取页面数据
由于ajax不使用form 而form具有自动收集数据的功能。 不使用form,就需要使用dom手写代码收集数据 |
①获得承载数据的元素对象
<input type="text" id="uname"> var obj=document.getElementById("uname "); |
②通过这个元素对象获取/修改数据
1.input对象的数据,是使用value属性 obj.value="123"; 设置 var res=obj.value; 获取 2.所有的双标签,使用innerHTML属性 获取/修改 数据 obj.innerHTML="123";设置 var res=obj.innerHTML 获取 |
③ES6的简化
ES6提出,可以使用元素的id直接代表整个元素的对象 所以,代码简化为如下 <input type="text" id="msg"> <h4 id="h"></h4> h.innerHTML=msg.value; |
④innerHTML详解
使用innerHTML可以动态给双标签添加内容 这里的内容,指可以添加其他元素 |
⑤事件
通过用户的行为来激发的操作,就是事件 onclick 单击 onblur 焦点移除事件,元素失去焦点,马上调用js onfocus 获取焦点事件,元素获得焦点,马上调用js |
1.名词解释三.ajax
①同步Synchronous
在一个任务进行时,不能开启其他任务 同步访问:浏览器在向服务器发送请求,只能等待服务器的响应,不能做其他事情 出现场合 1.地址栏输入url,访问页面 2.a标签的跳转 3.form提交 |
②异步Asynchronous
在一个任务开启时,可以同时进行其他任务 异步访问:浏览器向服务器发送请求时,用户还能在页面上做其他操作 出现场合 1.用户名注册的验证 2.百度的搜索建议 3.股票软件 |
2.什么是Ajax
Asynchronous JavaScript and xml 异步的 js 和 xml(数据承载方式) 本质:使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求 并且接受服务器响应回来的数据 |
3.使用ajax
1.创建异步对象 2.创建请求 3.发送请求 4.接收响应数据 |
①创建异步对象
var xhr=new XMLHttpRequest(); |
②.创建请求
xhr.open(method,url,isAsyn); xhr.open("get","http://127.0.0.1:8080/login",true); method:请求的方法,注意必须是字符串的形式"get" "post" url:请求的url,注意必须是字符串 isAsyn:是不是要使用异步,boolean值,true/false |
③.发送请求
xhr.send(formdata); 注意,get方法,没有formdata请求主体 所以在使用get方法时,这里的参数可以不填写,也可以写null |
④.绑定监听,接收响应数据
1.xhr.readyState属性 用于表示xhr对象的请求状态,一共5个状态 0:请求尚未初始化 1: 已经打开服务器连接,正在发送请求 2:接收响应头 3:接收响应主体 4:响应数据接收完毕 |
①服务器4.代参数的get方法
②ajax代码
xhr.open("get",url,true) url="/demo/get_login?uname="+$uname+"&upwd="+$upwd |
错误总结
1.跨域错误
使用ctrl+b打开页面,进行ajax连接 会出现跨域错误。要使用服务器开启页面的方式打开 |
2.404,接口或者资源位置出错,前后台代码都需要排查
3.500 服务器代码错误,黑窗口会给你提示
4.不显示不报错----------一步一打桩
AJAX二的更多相关文章
- ajax二次封装之异步加载
ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...
- 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现
一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...
- 谈谈Ajax(二)
昨天还没有谈完,今天做一个了解. 首先还是以错误,来讲述. 一.AJax常见错误 Ajax常见的错误,除了昨天列举的之外.还有就是如下状态码: 405,请求类型错误,比如请求是POST,你却用GET, ...
- 初学Ajax(二)
$.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.loa ...
- jQuery Ajax 二次封装
jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...
- AJAX(二)-实现验证码异步验证功能
案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...
- AJAX(二):HTTP头部信息
每个http请求和响应都会带有相应都头部信息,其中有的对开发人员有用,有的页没有什么用默认情况下,发送xhr请求的同时,还有发送下列头部信息 Accept:浏览器能够处理的内容类型 Accept-Ch ...
- Python之路Day20-Django一对一(多)以及Ajax
上节内容回顾 问题一:Django请求生命周期 -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串-> URL对应关系(匹配) -> 视图函数 -> ...
- 前台jquery+ajax+json传值,后台处理完后返回json字符串,如何取里面的属性值?(不用springmvc注解)
一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp& ...
随机推荐
- 2019-2020-1 20199308《Linux内核原理与分析》第八周作业
<Linux内核分析> 第七章 可执行程序工作原理 7.1 知识点 1.目标文件:编译器生成的文件,"目标"指平台,它决定了编译器使用的机器指令集. 2.目标文件格式: ...
- 设置 cipher suite
https://man.openbsd.org/SSL_CTX_set_cipher_list.3#ECDHE SSL_CTX_set_cipher_list() sets the list of a ...
- Linux 如何通过 iscsi target name 获取 ip
by Mike Andrews # lsscsi -t [:::] disk iqn.-.com.blockbridge:t-pjxfzufjkp-illoghjk,t,0x1 /dev/sda [: ...
- Window+Protobuf使用说明
Window+Protobuf使用说明 C++WindowCmakeProtocbuf 介绍 起因 由于项目中要用到二进制存储数据,之前使用的方式是按照字节数依次将数据写入字节流中, 但是这样做起来做 ...
- OpenCV学习(4)——动态结构
学习一个新知识,无外乎学习它本身和它的工具.OpenCV提供许多内置的结构及处理函数,非常值得学习. 内存存储 在OpenCV中,内存存储器是一个可以用来存储序列.数组和图像的动态增长的数据结构.它由 ...
- 修改mysql配置中my.conf中max_allowed_packet变量
mysql根据配置文件会限制server接受的数据包大小. 有时候大的插入和更新会受max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置 show VARIABLES ...
- 【ejabberd】安装XMPP服务器ejabberd(Ubuntu 12.04)
ejabberd ejabberd is a free and open source instant messaging server written in Erlang/OTP. ejabberd ...
- Flex 布局教程:语法篇(转自阮一峰的网络日志)
作者:阮一峰(转自阮一峰的网络日志,如有侵权,立即删除) 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 ...
- jQuery里面click、this事件遇到(Django模型里for)相同的id名和class名想获取值
遇到的原型是这样的!下面我把它简化一下; click事件: 在浏览器里面只能获取横线上面的值,和下面的第一个值!! 这是因为id等级比class高,而且js要求id不能重复! 当 转载于:https: ...
- MySQL使用ProxySQL实现读写分离
1 ProxySQL简介: ProxySQL是一个高性能的MySQL中间件,拥有强大的规则引擎.官方文档:https://github.com/sysown/proxysql/wiki/下载地址:ht ...